Form Slider

Estimated reading: 3 minutes 23 views

FlutKit supports multiple slider implementations, ranging from Flutter’s default sliders to fully customized and advanced sliders using SliderTheme and Syncfusion components. This allows you to choose the right balance between simplicity, customization, and feature richness.

Supported Slider Types

FlutKit provides support for:

Flutter Slider (single value)
Flutter RangeSlider (range selection)
Custom Flutter sliders using SliderTheme
Syncfusion sliders (SfSlider and SfRangeSlider)

Each option serves different use cases depending on UI complexity and interaction requirements.

Default Flutter Slider

Use Flutter’s default Slider for simple numeric input.

Key Characteristics

Lightweight and performant
Minimal configuration
Ideal for basic forms and settings

Basic Implementation

Dart

Slider(
  value: _basicSliderValue,
  min: 0,
  max: 100,
  divisions: 100,
  onChanged: (value) {
    setState(() {
      _basicSliderValue = value;
    });
  },
)

Slider(
  value: _basicSliderValue,
  min: 0,
  max: 100,
  divisions: 100,
  onChanged: (value) {
    setState(() {
      _basicSliderValue = value;
    });
  },
)

Slider with Label and Steps

You can enhance usability by displaying labels and enforcing step-based values using divisions.

Dart

Slider(
  value: _stepsSliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  label: _stepsSliderValue.round().toString(),
  activeColor: kSuccessColor,
  onChanged: (value) {
    setState(() {
      _stepsSliderValue = value;
    });
  },
)

Slider(
  value: _stepsSliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  label: _stepsSliderValue.round().toString(),
  activeColor: kSuccessColor,
  onChanged: (value) {
    setState(() {
      _stepsSliderValue = value;
    });
  },
)

Range Slider

Use RangeSlider when users need to select a value range.

Dart

RangeSlider(
  values: _rangeValues,
  min: 0,
  max: 100,
  divisions: 10,
  labels: RangeLabels(
    _rangeValues.start.round().toString(),
    _rangeValues.end.round().toString(),
  ),
  activeColor: kErrorColor,
  onChanged: (values) {
    setState(() {
      _rangeValues = values;
    });
  },
)

RangeSlider(
  values: _rangeValues,
  min: 0,
  max: 100,
  divisions: 10,
  labels: RangeLabels(
    _rangeValues.start.round().toString(),
    _rangeValues.end.round().toString(),
  ),
  activeColor: kErrorColor,
  onChanged: (values) {
    setState(() {
      _rangeValues = values;
    });
  },
)

Custom Slider Using SliderTheme

For dashboard-style UI, FlutKit recommends customizing sliders using SliderTheme along with reusable track and thumb shapes.

Key Benefits

Consistent UI across the application
Full control over track, thumb, and overlay styles
Reusable styling via theme configuration

Example Implementation

Dart

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    trackHeight: 16,
    overlayColor: Colors.transparent,
    activeTrackColor: Colors.transparent,
    inactiveTrackColor: Colors.transparent,
    trackShape: BorderedTrackShape(
      fillColor: Colors.grey.shade100,
      borderColor: Colors.grey.shade300,
      borderRadius: 4,
      borderWidth: 1.0,
    ),
    thumbShape: RectangularThumbShape(
      color: kSuccessColor,
      width: 12,
      height: 24,
      borderRadius: 4,
    ),
  ),
  child: Slider(
    value: _basicSliderValue,
    min: 0,
    max: 100,
    divisions: 100,
    onChanged: (value) {
      setState(() {
        _basicSliderValue = value;
      });
    },
  ),
)

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    trackHeight: 16,
    overlayColor: Colors.transparent,
    activeTrackColor: Colors.transparent,
    inactiveTrackColor: Colors.transparent,
    trackShape: BorderedTrackShape(
      fillColor: Colors.grey.shade100,
      borderColor: Colors.grey.shade300,
      borderRadius: 4,
      borderWidth: 1.0,
    ),
    thumbShape: RectangularThumbShape(
      color: kSuccessColor,
      width: 12,
      height: 24,
      borderRadius: 4,
    ),
  ),
  child: Slider(
    value: _basicSliderValue,
    min: 0,
    max: 100,
    divisions: 100,
    onChanged: (value) {
      setState(() {
        _basicSliderValue = value;
      });
    },
  ),
)

Syncfusion Sliders

FlutKit supports Syncfusion Flutter Sliders by default for advanced use cases.

Recommended Use Cases

Sliders with ticks and labels
Tooltips and precise value selection
Vertical sliders
Enterprise dashboards

Horizontal Slider Example

Dart

SfSlider(
  min: 0.0,
  max: 100.0,
  value: _value,
  interval: 20,
  showTicks: true,
  showLabels: true,
  enableTooltip: true,
  minorTicksPerInterval: 1,
  activeColor: kPrimaryColor,
  inactiveColor: Colors.blueGrey.shade100,
  thumbShape: CustomThumbShape(),
  onChanged: (dynamic value) {
    setState(() {
      _value = value;
    });
  },
)

SfSlider(
  min: 0.0,
  max: 100.0,
  value: _value,
  interval: 20,
  showTicks: true,
  showLabels: true,
  enableTooltip: true,
  minorTicksPerInterval: 1,
  activeColor: kPrimaryColor,
  inactiveColor: Colors.blueGrey.shade100,
  thumbShape: CustomThumbShape(),
  onChanged: (dynamic value) {
    setState(() {
      _value = value;
    });
  },
)

Range Slider Example

Dart

SfRangeSlider(
  min: 0.0,
  max: 100.0,
  values: _rangeValues,
  interval: 20,
  showTicks: true,
  showLabels: true,
  enableTooltip: true,
  minorTicksPerInterval: 1,
  activeColor: kInfoColor,
  inactiveColor: Colors.blueGrey.shade100,
  thumbShape: CustomThumbShape(),
  onChanged: (SfRangeValues values) {
    setState(() {
      _rangeValues = values;
    });
  },
)

SfRangeSlider(
  min: 0.0,
  max: 100.0,
  values: _rangeValues,
  interval: 20,
  showTicks: true,
  showLabels: true,
  enableTooltip: true,
  minorTicksPerInterval: 1,
  activeColor: kInfoColor,
  inactiveColor: Colors.blueGrey.shade100,
  thumbShape: CustomThumbShape(),
  onChanged: (SfRangeValues values) {
    setState(() {
      _rangeValues = values;
    });
  },
)

Demo

You can explore and interact with all slider variations directly in the FlutKit demo application.

Forms → Sliders

Best Practices

Use Flutter default sliders for simple and fast implementation.
Use SliderTheme for consistent visual identity in dashboards.
Use Syncfusion sliders when advanced interaction and visualization are required.