feat(UX-1355): Make input field on slider component (#403)

aygurs · thelukewalton · Copilot · web-flow · commit 575e59c66494 · 2025-10-10T21:05:02.000+01:00
Co-authored-by: thelukewalton &lt;lwalton@zebra.com&gt;
Co-authored-by: Luke Walton &lt;thelukewalton@users.noreply.github.com&gt;
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
diff --git a/example/lib/home.dart b/example/lib/home.dart
@@ -113,6 +113,7 @@ final List<Component> components = [
   Component(SegmentedControlExample.name, (context) => const SegmentedControlExample()),
   Component(SelectInputExample.name, (context) => const SelectInputExample()),
   Component(SliderExample.name, (context) => const SliderExample()),
+  Component(SliderInputField.name, (context) => const SliderInputField()),
   Component(SnackBarExample.name, (context) => const SnackBarExample()),
   Component(StatusChipExample.name, (context) => const StatusChipExample()),
   Component(StatusLabel.name, (context) => const StatusLabel()),
diff --git a/example/lib/pages/components/slider_example.dart b/example/lib/pages/components/slider_example.dart
@@ -35,3 +35,42 @@ class _SliderExampleState extends State<SliderExample> {
     );
   }
 }
+
+class SliderInputField extends StatefulWidget {
+  static const String name = 'Slider/SliderInputField';
+
+  const SliderInputField({super.key});
+
+  @override
+  State<SliderInputField> createState() => _SliderInputFieldState();
+}
+
+class _SliderInputFieldState extends State<SliderInputField> {
+  double value1 = 50;
+  double value2 = 50;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: SliderInputField.name,
+      children: [
+        ZetaSlider(
+          value: value1,
+          divisions: 5,
+          inputField: true,
+        ),
+        ZetaSlider(
+          value: value1,
+          onChange: (newValue) => setState(() => value1 = newValue),
+          inputField: true,
+        ),
+        ZetaSlider(
+          value: value2,
+          divisions: 5,
+          onChange: (newValue) => setState(() => value2 = newValue),
+          inputField: true,
+        ),
+      ],
+    );
+  }
+}
diff --git a/packages/zeta_flutter/lib/src/components/slider/slider.dart b/packages/zeta_flutter/lib/src/components/slider/slider.dart
@@ -1,10 +1,9 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import '../../../zeta_flutter.dart';
 
-// TODO(UX-1355): Create slider input field.
-
 /// Sliders allow users to make selections from a range of values.
 ///
 /// Figma: https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=875-11860&node-type=canvas&m=dev
@@ -20,12 +19,13 @@ class ZetaSlider extends ZetaStatefulWidget {
     this.divisions,
     this.semanticLabel,
     this.min = 0.0,
-    this.max = 1.0,
+    this.max = 100.0,
+    this.inputField = false,
   });
 
   /// Double value to represent slider percentage.
   ///
-  /// Default [min] / [max] are 0.0 and 1.0 respectively; this value should be between [min] and [max].
+  /// Default [min] / [max] are 0.0 and 100.0 respectively; this value should be between [min] and [max].
   final double value;
 
   /// Callback to handle changing of slider
@@ -45,6 +45,13 @@ class ZetaSlider extends ZetaStatefulWidget {
   /// Maximum value of the slider.
   final double max;
 
+  /// Whether to show an input field to the right of the slider.
+  /// The input field will change the slider value when updated.
+  ///
+  /// This also adds the min and max values below the slider.
+  /// This will default to 0 - 100 if min and max are not changed.
+  final bool inputField;
+
   @override
   State<ZetaSlider> createState() => _ZetaSliderState();
   @override
@@ -57,24 +64,81 @@ class ZetaSlider extends ZetaStatefulWidget {
       ..add(IntProperty('divisions', divisions))
       ..add(StringProperty('semanticLabel', semanticLabel))
       ..add(DoubleProperty('max', max))
-      ..add(DoubleProperty('min', min));
+      ..add(DoubleProperty('min', min))
+      ..add(DiagnosticsProperty<bool>('inputField', inputField));
   }
 }
 
 class _ZetaSliderState extends State<ZetaSlider> {
   bool _selected = false;
+  final _inputController = TextEditingController();
+  Debounce? _debounce;
+
+  @override
+  void initState() {
+    super.initState();
+    _inputController.text = widget.value.toString();
+    _inputController.addListener(_updateTextField);
+  }
+
+  // Called when slider is updated, changes text field value.
+  void _updateTextFieldFromSlider(double sliderValue) {
+    _inputController.text = sliderValue.toInt().toString();
+  }
+
+  // Called when text field is updated, changes slider value.
+  void _updateTextField() {
+    _debounce?.cancel();
+    _debounce = Debounce(
+      () {
+        final number = int.tryParse(_inputController.text);
+        if (number != null) {
+          final num newValue;
+          if (widget.divisions != null) {
+            final divisionSize = (widget.max - widget.min) / widget.divisions!;
+            final snappedValue = ((number - widget.min) / divisionSize).round() * divisionSize + widget.min;
+            newValue = snappedValue.round().clamp(widget.min, widget.max);
+            if (number != newValue) {
+              _inputController.text = newValue.toString();
+            }
+          } else {
+            newValue = number.clamp(widget.min, widget.max).toInt();
+            if (number != newValue) {
+              _inputController.text = newValue.toString();
+            }
+          }
+          widget.onChange?.call(newValue.toDouble());
+        }
+      },
+      duration: const Duration(milliseconds: 200),
+    );
+  }
+
+  @override
+  void dispose() {
+    _debounce?.cancel();
+    _inputController.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    final colors = Zeta.of(context).colors;
+    final zeta = Zeta.of(context);
+    final colors = zeta.colors;
+
+    final activeColor = widget.onChange == null
+        ? colors.mainDisabled
+        : _selected
+            ? colors.mainPrimary
+            : colors.mainDefault;
 
     return MergeSemantics(
       child: Semantics(
         label: widget.semanticLabel,
         child: SliderTheme(
           data: SliderThemeData(
             /// Active Track
-            activeTrackColor: _activeColor,
+            activeTrackColor: activeColor,
             disabledActiveTrackColor: colors.mainDisabled,
 
             /// Inactive Track
@@ -90,45 +154,98 @@ class _ZetaSliderState extends State<ZetaSlider> {
             thumbColor: colors.mainDefault,
             disabledThumbColor: colors.mainDisabled,
             overlayShape: _SliderThumb(
-              size: Zeta.of(context).spacing.xl / 2,
+              size: zeta.spacing.xl / 2,
               rounded: context.rounded,
-              color: _activeColor,
+              color: activeColor,
             ),
             thumbShape: _SliderThumb(
-              size: Zeta.of(context).spacing.large / 2,
+              size: zeta.spacing.large / 2,
               rounded: context.rounded,
-              color: _activeColor,
+              color: activeColor,
             ),
             trackShape: context.rounded ? _RoundedRectangleTrackShape() : const RectangularSliderTrackShape(),
           ),
-          child: Slider(
-            value: widget.value,
-            onChanged: widget.onChange,
-            divisions: widget.divisions,
-            onChangeStart: (_) {
-              setState(() {
-                _selected = true;
-              });
-            },
-            onChangeEnd: (_) {
-              setState(() {
-                _selected = false;
-              });
-            },
-            min: widget.min,
-            max: widget.max,
-          ),
+          child: _generateSlider(),
         ),
       ),
     );
   }
 
-  Color get _activeColor {
-    final colors = Zeta.of(context).colors;
-    if (widget.onChange == null) {
-      return colors.mainDisabled;
+  Widget _generateCoreSlider() {
+    return Slider(
+      value: widget.value,
+      onChanged: widget.inputField
+          ? widget.onChange != null
+              ? (value) {
+                  // Update text field when slider changes
+                  _updateTextFieldFromSlider(value);
+                  widget.onChange?.call(value);
+                }
+              : null
+          : widget.onChange,
+      divisions: widget.divisions,
+      onChangeStart: (_) => setState(() => _selected = true),
+      onChangeEnd: (_) => setState(() => _selected = false),
+      min: widget.min,
+      max: widget.max,
+    );
+  }
+
+  // Private function to generate slider depending on input field boolean.
+  Widget _generateSlider() {
+    final zeta = Zeta.of(context);
+    final colors = zeta.colors;
+
+    // If input field is true, return slider with input field.
+    if (widget.inputField) {
+      return Row(
+        spacing: zeta.spacing.large,
+        children: [
+          Expanded(
+            child: Column(
+              spacing: zeta.spacing.small,
+              children: [
+                //Slider
+                _generateCoreSlider(),
+                //Numbers
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text(
+                      widget.min.toInt().toString(),
+                      style: zeta.textStyles.bodyMedium.apply(
+                        color: widget.onChange == null ? colors.mainDisabled : colors.mainDefault,
+                      ),
+                    ),
+                    Text(
+                      widget.max.toInt().toString(),
+                      style: zeta.textStyles.bodyMedium.apply(
+                        color: widget.onChange == null ? colors.mainDisabled : colors.mainDefault,
+                      ),
+                    ),
+                  ],
+                ).paddingHorizontal(zeta.spacing.minimum),
+              ],
+            ),
+          ),
+          //Text Input
+          SizedBox(
+            width: zeta.spacing.xl_8 + zeta.spacing.small,
+            child: ZetaTextInput(
+              keyboardType: TextInputType.number,
+              disabled: widget.onChange == null,
+              size: ZetaWidgetSize.large,
+              textAlign: TextAlign.center,
+              inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
+              controller: _inputController,
+            ),
+          ),
+        ],
+      );
     }
-    return _selected ? colors.mainPrimary : colors.mainDefault;
+
+    // If input field is false, return just the slider.
+    return _generateCoreSlider();
   }
 }
 
diff --git a/packages/zeta_flutter/lib/src/components/text_input/internal_text_input.dart b/packages/zeta_flutter/lib/src/components/text_input/internal_text_input.dart
@@ -39,6 +39,7 @@ class InternalTextInput extends ZetaStatefulWidget {
     this.borderRadius,
     this.textInputAction,
     this.constrained = false,
+    this.textAlign = TextAlign.start,
   })  : requirementLevel = requirementLevel ?? ZetaFormFieldRequirement.none,
         assert(prefix == null || prefixText == null, 'Only one of prefix or prefixText can be accepted.'),
         assert(suffix == null || suffixText == null, 'Only one of suffix or suffixText can be accepted.');
@@ -139,6 +140,10 @@ class InternalTextInput extends ZetaStatefulWidget {
   /// Determines if the prefix and suffix should be constrained.
   final bool constrained;
 
+  /// The text alignment within the input.
+  /// {@macro flutter.widgets.editableText.textAlign}
+  final TextAlign textAlign;
+
   @override
   State<InternalTextInput> createState() => InternalTextInputState();
   @override
@@ -167,7 +172,8 @@ class InternalTextInput extends ZetaStatefulWidget {
       ..add(DiagnosticsProperty<BorderRadius?>('borderRadius', borderRadius))
       ..add(StringProperty('semanticLabel', semanticLabel))
       ..add(EnumProperty<TextInputAction?>('textInputAction', textInputAction))
-      ..add(DiagnosticsProperty<bool>('constrained', constrained));
+      ..add(DiagnosticsProperty<bool>('constrained', constrained))
+      ..add(EnumProperty<TextAlign>('textAlign', textAlign));
   }
 }
 
@@ -352,6 +358,7 @@ class InternalTextInputState extends State<InternalTextInput> {
                         keyboardType: widget.keyboardType,
                         inputFormatters: widget.inputFormatters,
                         textAlignVertical: TextAlignVertical.center,
+                        textAlign: widget.textAlign,
                         onChanged: widget.onChange,
                         onSubmitted: widget.onSubmit,
                         style: _baseTextStyle,
diff --git a/packages/zeta_flutter/lib/src/components/text_input/text_input.dart b/packages/zeta_flutter/lib/src/components/text_input/text_input.dart
@@ -48,6 +48,7 @@ class ZetaTextInput extends ZetaTextFormField {
     this.keyboardType,
     this.focusNode,
     this.semanticLabel,
+    TextAlign textAlign = TextAlign.start,
   })  : assert(initialValue == null || controller == null, 'Only one of initial value and controller can be accepted.'),
         assert(prefix == null || prefixText == null, 'Only one of prefix or prefixText can be accepted.'),
         assert(suffix == null || suffixText == null, 'Only one of suffix or suffixText can be accepted.'),
@@ -77,6 +78,7 @@ class ZetaTextInput extends ZetaTextFormField {
               keyboardType: keyboardType,
               focusNode: focusNode,
               semanticLabel: semanticLabel,
+              textAlign: textAlign,
             );
           },
         );
diff --git a/packages/zeta_flutter/test/src/components/slider/slider_test.dart b/packages/zeta_flutter/test/src/components/slider/slider_test.dart
@@ -30,7 +30,7 @@ void main() {
 
   group('Interaction Tests', () {
     testWidgets('ZetaSlider min/max values', (WidgetTester tester) async {
-      const double sliderValue = 0.5;
+      const double sliderValue = 50;
       double? changedValue;
 
       await tester.pumpWidget(
@@ -46,15 +46,15 @@ void main() {
 
       final slider = tester.widget<Slider>(find.byType(Slider));
       expect(slider.min, 0.0);
-      expect(slider.max, 1.0);
+      expect(slider.max, 100.0);
 
       // Drag the slider to the minimum value
       await tester.drag(find.byType(Slider), const Offset(-400, 0));
       expect(changedValue, 0.0);
 
       // Drag the slider to the maximum value
       await tester.drag(find.byType(Slider), const Offset(400, 0));
-      expect(changedValue, 1.0);
+      expect(changedValue, 100.0);
     });
   });
 
diff --git a/widgetbook/lib/src/components/slider.widgetbook.dart b/widgetbook/lib/src/components/slider.widgetbook.dart
@@ -21,6 +21,7 @@ Widget sliderUseCase(BuildContext context) {
         divisions: context.knobs.intOrNull.slider(label: 'Divisions', min: 1, initialValue: 10),
         onChange: context.knobs.boolean(label: 'Disabled') ? null : (newValue) => setState(() => value = newValue),
         rounded: context.knobs.boolean(label: 'Rounded'),
+        inputField: context.knobs.boolean(label: 'Input Field'),
       );
     },
   );
