[Gallery] Add Material Sliders demo (#198)

* Added Material Sliders demo

gallery/gallery/lib/data/demos.dart

@@ -21,6 +21,7 @@ import 'package:gallery/demos/material/chip_demo.dart';
 import 'package:gallery/demos/material/dialog_demo.dart';
 import 'package:gallery/demos/material/list_demo.dart';
 import 'package:gallery/demos/material/selection_controls_demo.dart';
+import 'package:gallery/demos/material/sliders_demo.dart';
 import 'package:gallery/demos/material/snackbar_demo.dart';
 import 'package:gallery/demos/material/tabs_demo.dart';
 import 'package:gallery/demos/material/text_field_demo.dart';
@@ -324,6 +325,41 @@ List<GalleryDemo> materialDemos(BuildContext context) {
         ),
       ],
     ),
+    GalleryDemo(
+      title: GalleryLocalizations.of(context).demoSlidersTitle,
+      icon: GalleryIcons.sliders,
+      subtitle: GalleryLocalizations.of(context).demoSlidersSubtitle,
+      configurations: [
+        GalleryDemoConfiguration(
+          title: GalleryLocalizations.of(context).demoSlidersTitle,
+          description: GalleryLocalizations.of(context).demoSlidersDescription,
+          documentationUrl:
+              'https://api.flutter.dev/flutter/material/Slider-class.html',
+          buildRoute: (context) => SlidersDemo(type: SlidersDemoType.sliders),
+          code: CodeSegments.slidersDemo,
+        ),
+        GalleryDemoConfiguration(
+          title: GalleryLocalizations.of(context).demoRangeSlidersTitle,
+          description:
+              GalleryLocalizations.of(context).demoRangeSlidersDescription,
+          documentationUrl:
+              'https://api.flutter.dev/flutter/material/RangeSlider-class.html',
+          buildRoute: (context) =>
+              SlidersDemo(type: SlidersDemoType.rangeSliders),
+          code: CodeSegments.rangeSlidersDemo,
+        ),
+        GalleryDemoConfiguration(
+          title: GalleryLocalizations.of(context).demoCustomSlidersTitle,
+          description:
+              GalleryLocalizations.of(context).demoCustomSlidersDescription,
+          documentationUrl:
+              'https://api.flutter.dev/flutter/material/SliderTheme-class.html',
+          buildRoute: (context) =>
+              SlidersDemo(type: SlidersDemoType.customSliders),
+          code: CodeSegments.customSlidersDemo,
+        ),
+      ],
+    ),
     GalleryDemo(
       title: GalleryLocalizations.of(context).demoSnackbarsTitle,
       icon: GalleryIcons.snackbar,

gallery/gallery/lib/demos/material/sliders_demo.dart

@@ -0,0 +1,503 @@
+// Copyright 2019 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+import 'package:gallery/l10n/gallery_localizations.dart';
+
+enum SlidersDemoType {
+  sliders,
+  rangeSliders,
+  customSliders,
+}
+
+class SlidersDemo extends StatelessWidget {
+  const SlidersDemo({Key key, this.type}) : super(key: key);
+
+  final SlidersDemoType type;
+
+  String _title(BuildContext context) {
+    switch (type) {
+      case SlidersDemoType.sliders:
+        return GalleryLocalizations.of(context).demoSlidersTitle;
+      case SlidersDemoType.rangeSliders:
+        return GalleryLocalizations.of(context).demoRangeSlidersTitle;
+      case SlidersDemoType.customSliders:
+        return GalleryLocalizations.of(context).demoCustomSlidersTitle;
+    }
+    return '';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Widget sliders;
+    switch (type) {
+      case SlidersDemoType.sliders:
+        sliders = _Sliders();
+        break;
+      case SlidersDemoType.rangeSliders:
+        sliders = _RangeSliders();
+        break;
+      case SlidersDemoType.customSliders:
+        sliders = _CustomSliders();
+    }
+    return Scaffold(
+      appBar: AppBar(
+        automaticallyImplyLeading: false,
+        title: Text(_title(context)),
+      ),
+      body: sliders,
+    );
+  }
+}
+// BEGIN slidersDemo
+
+class _Sliders extends StatefulWidget {
+  @override
+  _SlidersState createState() => _SlidersState();
+}
+
+class _SlidersState extends State<_Sliders> {
+  double _continuousValue = 25;
+  double _discreteValue = 20;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 40),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Semantics(
+                label: GalleryLocalizations.of(context)
+                    .demoSlidersEditableNumericalValue,
+                child: SizedBox(
+                  width: 64,
+                  height: 48,
+                  child: TextField(
+                    textAlign: TextAlign.center,
+                    onSubmitted: (value) {
+                      final double newValue = double.tryParse(value);
+                      if (newValue != null && newValue != _continuousValue) {
+                        setState(() {
+                          _continuousValue = newValue.clamp(0, 100) as double;
+                        });
+                      }
+                    },
+                    keyboardType: TextInputType.number,
+                    controller: TextEditingController(
+                      text: _continuousValue.toStringAsFixed(0),
+                    ),
+                  ),
+                ),
+              ),
+              Slider(
+                value: _continuousValue,
+                min: 0,
+                max: 100,
+                onChanged: (value) {
+                  setState(() {
+                    _continuousValue = value;
+                  });
+                },
+              ),
+              Text(GalleryLocalizations.of(context)
+                  .demoSlidersContinuousWithEditableNumericalValue),
+            ],
+          ),
+          const SizedBox(height: 80),
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Slider(
+                value: _discreteValue,
+                min: 0,
+                max: 200,
+                divisions: 5,
+                label: _discreteValue.round().toString(),
+                onChanged: (value) {
+                  setState(() {
+                    _discreteValue = value;
+                  });
+                },
+              ),
+              Text(GalleryLocalizations.of(context).demoSlidersDiscrete),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// END
+
+// BEGIN rangeSlidersDemo
+
+class _RangeSliders extends StatefulWidget {
+  @override
+  _RangeSlidersState createState() => _RangeSlidersState();
+}
+
+class _RangeSlidersState extends State<_RangeSliders> {
+  RangeValues _continuousValues = const RangeValues(25, 75);
+  RangeValues _discreteValues = const RangeValues(40, 120);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 40),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              RangeSlider(
+                values: _continuousValues,
+                min: 0,
+                max: 100,
+                onChanged: (values) {
+                  setState(() {
+                    _continuousValues = values;
+                  });
+                },
+              ),
+              Text(GalleryLocalizations.of(context).demoSlidersContinuous),
+            ],
+          ),
+          const SizedBox(height: 80),
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              RangeSlider(
+                values: _discreteValues,
+                min: 0,
+                max: 200,
+                divisions: 5,
+                labels: RangeLabels(
+                  _discreteValues.start.round().toString(),
+                  _discreteValues.end.round().toString(),
+                ),
+                onChanged: (values) {
+                  setState(() {
+                    _discreteValues = values;
+                  });
+                },
+              ),
+              Text(GalleryLocalizations.of(context).demoSlidersDiscrete),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// END
+
+// BEGIN customSlidersDemo
+
+Path _downTriangle(double size, Offset thumbCenter, {bool invert = false}) {
+  final thumbPath = Path();
+  final height = math.sqrt(3) / 2;
+  final centerHeight = size * height / 3;
+  final halfSize = size / 2;
+  final sign = invert ? -1 : 1;
+  thumbPath.moveTo(
+      thumbCenter.dx - halfSize, thumbCenter.dy + sign * centerHeight);
+  thumbPath.lineTo(thumbCenter.dx, thumbCenter.dy - 2 * sign * centerHeight);
+  thumbPath.lineTo(
+      thumbCenter.dx + halfSize, thumbCenter.dy + sign * centerHeight);
+  thumbPath.close();
+  return thumbPath;
+}
+
+Path _rightTriangle(double size, Offset thumbCenter, {bool invert = false}) {
+  final thumbPath = Path();
+  final halfSize = size / 2;
+  final sign = invert ? -1 : 1;
+  thumbPath.moveTo(thumbCenter.dx + halfSize * sign, thumbCenter.dy);
+  thumbPath.lineTo(thumbCenter.dx - halfSize * sign, thumbCenter.dy - size);
+  thumbPath.lineTo(thumbCenter.dx - halfSize * sign, thumbCenter.dy + size);
+  thumbPath.close();
+  return thumbPath;
+}
+
+Path _upTriangle(double size, Offset thumbCenter) =>
+    _downTriangle(size, thumbCenter, invert: true);
+
+Path _leftTriangle(double size, Offset thumbCenter) =>
+    _rightTriangle(size, thumbCenter, invert: true);
+
+class _CustomRangeThumbShape extends RangeSliderThumbShape {
+  static const double _thumbSize = 4;
+  static const double _disabledThumbSize = 3;
+
+  @override
+  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
+    return isEnabled
+        ? const Size.fromRadius(_thumbSize)
+        : const Size.fromRadius(_disabledThumbSize);
+  }
+
+  static final Animatable<double> sizeTween = Tween<double>(
+    begin: _disabledThumbSize,
+    end: _thumbSize,
+  );
+
+  @override
+  void paint(
+    PaintingContext context,
+    Offset center, {
+    @required Animation<double> activationAnimation,
+    @required Animation<double> enableAnimation,
+    bool isDiscrete = false,
+    bool isEnabled = false,
+    bool isOnTop,
+    @required SliderThemeData sliderTheme,
+    TextDirection textDirection,
+    Thumb thumb,
+  }) {
+    final canvas = context.canvas;
+    final colorTween = ColorTween(
+      begin: sliderTheme.disabledThumbColor,
+      end: sliderTheme.thumbColor,
+    );
+
+    final size = _thumbSize * sizeTween.evaluate(enableAnimation);
+    Path thumbPath;
+    switch (textDirection) {
+      case TextDirection.rtl:
+        switch (thumb) {
+          case Thumb.start:
+            thumbPath = _rightTriangle(size, center);
+            break;
+          case Thumb.end:
+            thumbPath = _leftTriangle(size, center);
+            break;
+        }
+        break;
+      case TextDirection.ltr:
+        switch (thumb) {
+          case Thumb.start:
+            thumbPath = _leftTriangle(size, center);
+            break;
+          case Thumb.end:
+            thumbPath = _rightTriangle(size, center);
+            break;
+        }
+        break;
+    }
+    canvas.drawPath(
+      thumbPath,
+      Paint()..color = colorTween.evaluate(enableAnimation),
+    );
+  }
+}
+
+class _CustomThumbShape extends SliderComponentShape {
+  static const double _thumbSize = 4;
+  static const double _disabledThumbSize = 3;
+
+  @override
+  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
+    return isEnabled
+        ? const Size.fromRadius(_thumbSize)
+        : const Size.fromRadius(_disabledThumbSize);
+  }
+
+  static final Animatable<double> sizeTween = Tween<double>(
+    begin: _disabledThumbSize,
+    end: _thumbSize,
+  );
+
+  @override
+  void paint(
+    PaintingContext context,
+    Offset thumbCenter, {
+    Animation<double> activationAnimation,
+    Animation<double> enableAnimation,
+    bool isDiscrete,
+    TextPainter labelPainter,
+    RenderBox parentBox,
+    SliderThemeData sliderTheme,
+    TextDirection textDirection,
+    double value,
+  }) {
+    final canvas = context.canvas;
+    final colorTween = ColorTween(
+      begin: sliderTheme.disabledThumbColor,
+      end: sliderTheme.thumbColor,
+    );
+    final size = _thumbSize * sizeTween.evaluate(enableAnimation);
+    final thumbPath = _downTriangle(size, thumbCenter);
+    canvas.drawPath(
+      thumbPath,
+      Paint()..color = colorTween.evaluate(enableAnimation),
+    );
+  }
+}
+
+class _CustomValueIndicatorShape extends SliderComponentShape {
+  static const double _indicatorSize = 4;
+  static const double _disabledIndicatorSize = 3;
+  static const double _slideUpHeight = 40;
+
+  @override
+  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
+    return Size.fromRadius(isEnabled ? _indicatorSize : _disabledIndicatorSize);
+  }
+
+  static final Animatable<double> sizeTween = Tween<double>(
+    begin: _disabledIndicatorSize,
+    end: _indicatorSize,
+  );
+
+  @override
+  void paint(
+    PaintingContext context,
+    Offset thumbCenter, {
+    Animation<double> activationAnimation,
+    Animation<double> enableAnimation,
+    bool isDiscrete,
+    TextPainter labelPainter,
+    RenderBox parentBox,
+    SliderThemeData sliderTheme,
+    TextDirection textDirection,
+    double value,
+  }) {
+    final canvas = context.canvas;
+    final enableColor = ColorTween(
+      begin: sliderTheme.disabledThumbColor,
+      end: sliderTheme.valueIndicatorColor,
+    );
+    final slideUpTween = Tween<double>(
+      begin: 0,
+      end: _slideUpHeight,
+    );
+    final size = _indicatorSize * sizeTween.evaluate(enableAnimation);
+    final slideUpOffset =
+        Offset(0, -slideUpTween.evaluate(activationAnimation));
+    final thumbPath = _upTriangle(size, thumbCenter + slideUpOffset);
+    final paintColor = enableColor
+        .evaluate(enableAnimation)
+        .withAlpha((255 * activationAnimation.value).round());
+    canvas.drawPath(
+      thumbPath,
+      Paint()..color = paintColor,
+    );
+    canvas.drawLine(
+        thumbCenter,
+        thumbCenter + slideUpOffset,
+        Paint()
+          ..color = paintColor
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 2);
+    labelPainter.paint(
+      canvas,
+      thumbCenter +
+          slideUpOffset +
+          Offset(-labelPainter.width / 2, -labelPainter.height - 4),
+    );
+  }
+}
+
+class _CustomSliders extends StatefulWidget {
+  @override
+  _CustomSlidersState createState() => _CustomSlidersState();
+}
+
+class _CustomSlidersState extends State<_CustomSliders> {
+  double _discreteCustomValue = 25;
+  RangeValues _continuousCustomValues = const RangeValues(40, 160);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 40),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SliderTheme(
+                data: theme.sliderTheme.copyWith(
+                  activeTrackColor: Colors.deepPurple,
+                  inactiveTrackColor:
+                      theme.colorScheme.onSurface.withOpacity(0.5),
+                  activeTickMarkColor:
+                      theme.colorScheme.onSurface.withOpacity(0.7),
+                  inactiveTickMarkColor:
+                      theme.colorScheme.surface.withOpacity(0.7),
+                  overlayColor: theme.colorScheme.onSurface.withOpacity(0.12),
+                  thumbColor: Colors.deepPurple,
+                  valueIndicatorColor: Colors.deepPurpleAccent,
+                  thumbShape: _CustomThumbShape(),
+                  valueIndicatorShape: _CustomValueIndicatorShape(),
+                  valueIndicatorTextStyle: theme.accentTextTheme.body2
+                      .copyWith(color: theme.colorScheme.onSurface),
+                ),
+                child: Slider(
+                  value: _discreteCustomValue,
+                  min: 0,
+                  max: 200,
+                  divisions: 5,
+                  semanticFormatterCallback: (value) =>
+                      value.round().toString(),
+                  label: '${_discreteCustomValue.round()}',
+                  onChanged: (value) {
+                    setState(() {
+                      _discreteCustomValue = value;
+                    });
+                  },
+                ),
+              ),
+              Text(GalleryLocalizations.of(context)
+                  .demoSlidersDiscreteSliderWithCustomTheme),
+            ],
+          ),
+          const SizedBox(height: 80),
+          Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SliderTheme(
+                data: SliderThemeData(
+                  activeTrackColor: Colors.deepPurple,
+                  inactiveTrackColor: Colors.black26,
+                  activeTickMarkColor: Colors.white70,
+                  inactiveTickMarkColor: Colors.black,
+                  overlayColor: Colors.black12,
+                  thumbColor: Colors.deepPurple,
+                  rangeThumbShape: _CustomRangeThumbShape(),
+                  showValueIndicator: ShowValueIndicator.never,
+                ),
+                child: RangeSlider(
+                  values: _continuousCustomValues,
+                  min: 0,
+                  max: 200,
+                  onChanged: (values) {
+                    setState(() {
+                      _continuousCustomValues = values;
+                    });
+                  },
+                ),
+              ),
+              Text(GalleryLocalizations.of(context)
+                  .demoSlidersContinuousRangeSliderWithCustomTheme),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// END

gallery/gallery/lib/l10n/gallery_localizations.dart

@@ -1637,6 +1637,21 @@ class GalleryLocalizations {
         desc: r'Title for the cupertino bottom tab bar demo.');
   }
 
+  String get demoCustomSlidersDescription {
+    return Intl.message(
+        r'Sliders reflect a range of values along a bar, from which users may select a single value or range of values. The sliders can be themed and customized.',
+        locale: _localeName,
+        name: 'demoCustomSlidersDescription',
+        desc: r'Description for the custom sliders demo.');
+  }
+
+  String get demoCustomSlidersTitle {
+    return Intl.message(r'Custom Sliders',
+        locale: _localeName,
+        name: 'demoCustomSlidersTitle',
+        desc: r'Title for the custom sliders component demo.');
+  }
+
   String get demoDialogSubtitle {
     return Intl.message(r'Simple, alert, and fullscreen',
         locale: _localeName,
@@ -1844,6 +1859,21 @@ class GalleryLocalizations {
         desc: r'Title for the raised button component demo.');
   }
 
+  String get demoRangeSlidersDescription {
+    return Intl.message(
+        r'Sliders reflect a range of values along a bar. They can have icons on both ends of the bar that reflect a range of values. They are ideal for adjusting settings such as volume, brightness, or applying image filters.',
+        locale: _localeName,
+        name: 'demoRangeSlidersDescription',
+        desc: r'Description for the range sliders demo.');
+  }
+
+  String get demoRangeSlidersTitle {
+    return Intl.message(r'Range Sliders',
+        locale: _localeName,
+        name: 'demoRangeSlidersTitle',
+        desc: r'Title for the range sliders component demo.');
+  }
+
   String get demoSelectionControlsCheckboxDescription {
     return Intl.message(
         r'Checkboxes allow the user to select multiple options from a set. A normal checkbox'
@@ -1922,6 +1952,74 @@ class GalleryLocalizations {
         desc: r'Title for the simple dialog component demo.');
   }
 
+  String get demoSlidersContinuous {
+    return Intl.message(r'Continuous',
+        locale: _localeName,
+        name: 'demoSlidersContinuous',
+        desc:
+            r'Text to describe that we have a slider with continuous values.');
+  }
+
+  String get demoSlidersContinuousRangeSliderWithCustomTheme {
+    return Intl.message(r'Continuous Range Slider with Custom Theme',
+        locale: _localeName,
+        name: 'demoSlidersContinuousRangeSliderWithCustomTheme',
+        desc:
+            r'Text to describe that we have a range slider with continuous values and a custom theme. ');
+  }
+
+  String get demoSlidersContinuousWithEditableNumericalValue {
+    return Intl.message(r'Continuous with Editable Numerical Value',
+        locale: _localeName,
+        name: 'demoSlidersContinuousWithEditableNumericalValue',
+        desc:
+            r'Text to describe a slider has a continuous value with an editable numerical value.');
+  }
+
+  String get demoSlidersDescription {
+    return Intl.message(
+        r'Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.',
+        locale: _localeName,
+        name: 'demoSlidersDescription',
+        desc: r'Description for the sliders demo.');
+  }
+
+  String get demoSlidersDiscrete {
+    return Intl.message(r'Discrete',
+        locale: _localeName,
+        name: 'demoSlidersDiscrete',
+        desc: r'Text to describe that we have a slider with discrete values.');
+  }
+
+  String get demoSlidersDiscreteSliderWithCustomTheme {
+    return Intl.message(r'Discrete Slider with Custom Theme',
+        locale: _localeName,
+        name: 'demoSlidersDiscreteSliderWithCustomTheme',
+        desc:
+            r'Text to describe that we have a slider with discrete values and a custom theme. ');
+  }
+
+  String get demoSlidersEditableNumericalValue {
+    return Intl.message(r'Editable numerical value',
+        locale: _localeName,
+        name: 'demoSlidersEditableNumericalValue',
+        desc: r'Label for input field that has an editable numerical value.');
+  }
+
+  String get demoSlidersSubtitle {
+    return Intl.message(r'Widgets for selecting a value by swiping',
+        locale: _localeName,
+        name: 'demoSlidersSubtitle',
+        desc: r'Short description for the sliders component demo.');
+  }
+
+  String get demoSlidersTitle {
+    return Intl.message(r'Sliders',
+        locale: _localeName,
+        name: 'demoSlidersTitle',
+        desc: r'Title for the sliders component demo.');
+  }
+
   String get demoSnackbarsAction {
     return Intl.message(r'You pressed the snackbar action.',
         locale: _localeName,

gallery/gallery/lib/l10n/intl_en_US.arb

@@ -577,6 +577,58 @@
   "@demoSimpleDialogDescription": {
     "description": "Description for the simple dialog component demo."
   },
+  "demoSlidersTitle": "Sliders",
+  "@demoSlidersTitle": {
+    "description": "Title for the sliders component demo."
+  },
+  "demoSlidersSubtitle": "Widgets for selecting a value by swiping",
+  "@demoSlidersSubtitle": {
+    "description": "Short description for the sliders component demo."
+  },
+  "demoSlidersDescription": "Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.",
+  "@demoSlidersDescription": {
+    "description": "Description for the sliders demo."
+  },
+  "demoRangeSlidersTitle": "Range Sliders",
+  "@demoRangeSlidersTitle": {
+    "description": "Title for the range sliders component demo."
+  },
+  "demoRangeSlidersDescription": "Sliders reflect a range of values along a bar. They can have icons on both ends of the bar that reflect a range of values. They are ideal for adjusting settings such as volume, brightness, or applying image filters.",
+  "@demoRangeSlidersDescription": {
+    "description": "Description for the range sliders demo."
+  },
+  "demoCustomSlidersTitle": "Custom Sliders",
+  "@demoCustomSlidersTitle": {
+    "description": "Title for the custom sliders component demo."
+  },
+  "demoCustomSlidersDescription": "Sliders reflect a range of values along a bar, from which users may select a single value or range of values. The sliders can be themed and customized.",
+  "@demoCustomSlidersDescription": {
+    "description": "Description for the custom sliders demo."
+  },
+  "demoSlidersContinuousWithEditableNumericalValue": "Continuous with Editable Numerical Value",
+  "@demoSlidersContinuousWithEditableNumericalValue": {
+    "description": "Text to describe a slider has a continuous value with an editable numerical value."
+  },
+  "demoSlidersDiscrete": "Discrete",
+  "@demoSlidersDiscrete": {
+    "description": "Text to describe that we have a slider with discrete values."
+  },
+  "demoSlidersDiscreteSliderWithCustomTheme": "Discrete Slider with Custom Theme",
+  "@demoSlidersDiscreteSliderWithCustomTheme": {
+    "description": "Text to describe that we have a slider with discrete values and a custom theme. "
+  },
+  "demoSlidersContinuousRangeSliderWithCustomTheme": "Continuous Range Slider with Custom Theme",
+  "@demoSlidersContinuousRangeSliderWithCustomTheme": {
+    "description": "Text to describe that we have a range slider with continuous values and a custom theme. "
+  },
+  "demoSlidersContinuous": "Continuous",
+  "@demoSlidersContinuous": {
+    "description": "Text to describe that we have a slider with continuous values."
+  },
+  "demoSlidersEditableNumericalValue": "Editable numerical value",
+  "@demoSlidersEditableNumericalValue": {
+    "description": "Label for input field that has an editable numerical value."
+  },
   "demoFullscreenDialogTitle": "Fullscreen",
   "@demoFullscreenDialogTitle": {
     "description": "Title for the fullscreen dialog component demo."

gallery/gallery/lib/l10n/intl_en_US.xml

@@ -541,6 +541,58 @@
     name="demoSimpleDialogDescription"
     description="Description for the simple dialog component demo."
     >A simple dialog offers the user a choice between several options. A simple dialog has an optional title that is displayed above the choices.</string>
+  <string
+    name="demoSlidersTitle"
+    description="Title for the sliders component demo."
+    >Sliders</string>
+  <string
+    name="demoSlidersSubtitle"
+    description="Short description for the sliders component demo."
+    >Widgets for selecting a value by swiping</string>
+  <string
+    name="demoSlidersDescription"
+    description="Description for the sliders demo."
+    >Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.</string>
+  <string
+    name="demoRangeSlidersTitle"
+    description="Title for the range sliders component demo."
+    >Range Sliders</string>
+  <string
+    name="demoRangeSlidersDescription"
+    description="Description for the range sliders demo."
+    >Sliders reflect a range of values along a bar. They can have icons on both ends of the bar that reflect a range of values. They are ideal for adjusting settings such as volume, brightness, or applying image filters.</string>
+  <string
+    name="demoCustomSlidersTitle"
+    description="Title for the custom sliders component demo."
+    >Custom Sliders</string>
+  <string
+    name="demoCustomSlidersDescription"
+    description="Description for the custom sliders demo."
+    >Sliders reflect a range of values along a bar, from which users may select a single value or range of values. The sliders can be themed and customized.</string>
+  <string
+    name="demoSlidersContinuousWithEditableNumericalValue"
+    description="Text to describe a slider has a continuous value with an editable numerical value."
+    >Continuous with Editable Numerical Value</string>
+  <string
+    name="demoSlidersDiscrete"
+    description="Text to describe that we have a slider with discrete values."
+    >Discrete</string>
+  <string
+    name="demoSlidersDiscreteSliderWithCustomTheme"
+    description="Text to describe that we have a slider with discrete values and a custom theme. "
+    >Discrete Slider with Custom Theme</string>
+  <string
+    name="demoSlidersContinuousRangeSliderWithCustomTheme"
+    description="Text to describe that we have a range slider with continuous values and a custom theme. "
+    >Continuous Range Slider with Custom Theme</string>
+  <string
+    name="demoSlidersContinuous"
+    description="Text to describe that we have a slider with continuous values."
+    >Continuous</string>
+  <string
+    name="demoSlidersEditableNumericalValue"
+    description="Label for input field that has an editable numerical value."
+    >Editable numerical value</string>
   <string
     name="demoFullscreenDialogTitle"
     description="Title for the fullscreen dialog component demo."

gallery/gallery/lib/l10n/messages_en_US.dart

@@ -422,6 +422,10 @@ class MessageLookup extends MessageLookupByLibrary {
             MessageLookupByLibrary.simpleMessage("iOS-style bottom tab bar"),
         "demoCupertinoTabBarTitle":
             MessageLookupByLibrary.simpleMessage("Tab Bar"),
+        "demoCustomSlidersDescription": MessageLookupByLibrary.simpleMessage(
+            "Sliders reflect a range of values along a bar, from which users may select a single value or range of values. The sliders can be themed and customized."),
+        "demoCustomSlidersTitle":
+            MessageLookupByLibrary.simpleMessage("Custom Sliders"),
         "demoDialogSubtitle": MessageLookupByLibrary.simpleMessage(
             "Simple, alert, and fullscreen"),
         "demoDialogTitle": MessageLookupByLibrary.simpleMessage("Dialogs"),
@@ -474,6 +478,10 @@ class MessageLookup extends MessageLookupByLibrary {
             "Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces."),
         "demoRaisedButtonTitle":
             MessageLookupByLibrary.simpleMessage("Raised Button"),
+        "demoRangeSlidersDescription": MessageLookupByLibrary.simpleMessage(
+            "Sliders reflect a range of values along a bar. They can have icons on both ends of the bar that reflect a range of values. They are ideal for adjusting settings such as volume, brightness, or applying image filters."),
+        "demoRangeSlidersTitle":
+            MessageLookupByLibrary.simpleMessage("Range Sliders"),
         "demoSelectionControlsCheckboxDescription":
             MessageLookupByLibrary.simpleMessage(
                 "Checkboxes allow the user to select multiple options from a set. A normal checkbox\'s value is true or false and a tristate checkbox\'s value can also be null."),
@@ -496,6 +504,25 @@ class MessageLookup extends MessageLookupByLibrary {
         "demoSimpleDialogDescription": MessageLookupByLibrary.simpleMessage(
             "A simple dialog offers the user a choice between several options. A simple dialog has an optional title that is displayed above the choices."),
         "demoSimpleDialogTitle": MessageLookupByLibrary.simpleMessage("Simple"),
+        "demoSlidersContinuous":
+            MessageLookupByLibrary.simpleMessage("Continuous"),
+        "demoSlidersContinuousRangeSliderWithCustomTheme":
+            MessageLookupByLibrary.simpleMessage(
+                "Continuous Range Slider with Custom Theme"),
+        "demoSlidersContinuousWithEditableNumericalValue":
+            MessageLookupByLibrary.simpleMessage(
+                "Continuous with Editable Numerical Value"),
+        "demoSlidersDescription": MessageLookupByLibrary.simpleMessage(
+            "Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters."),
+        "demoSlidersDiscrete": MessageLookupByLibrary.simpleMessage("Discrete"),
+        "demoSlidersDiscreteSliderWithCustomTheme":
+            MessageLookupByLibrary.simpleMessage(
+                "Discrete Slider with Custom Theme"),
+        "demoSlidersEditableNumericalValue":
+            MessageLookupByLibrary.simpleMessage("Editable numerical value"),
+        "demoSlidersSubtitle": MessageLookupByLibrary.simpleMessage(
+            "Widgets for selecting a value by swiping"),
+        "demoSlidersTitle": MessageLookupByLibrary.simpleMessage("Sliders"),
         "demoSnackbarsAction": MessageLookupByLibrary.simpleMessage(
             "You pressed the snackbar action."),
         "demoSnackbarsActionButtonLabel":