Flutter - Slider Input Widget Example

A Slider is an input widget where user can set a value by dragging to or pressing on desired position. In this tutorial, I'm going to show you how to use Slider widget in Flutter from the basic things like setting the minimum and maximum value, then how to customize the look of a Slider.

A Slider widget is usually used to change a value. So, we need to store the value in a variable. The Slider class requires you to implement onChanged function which will be called every time the user changes the slider position. The most common thing to do inside the callback is updating the value. The value itself must be passed as value argument, which can be used to set initial value.

Besides getting the value, you also need to set minimum and maximum value alllowed. To set the minimum and maximum limitation, you can use min and max arguments respectively. The slider can be continuous (by default) or discrete. If you want to use discrete values, use divisions argument which automatically calculate the gap between each discrete values.

Below is the arguments supported by Slider. There are only two required arguments: value and onChanged, while the others are optional.

Name Type Description
value (required) double Current value of the slider.
onChanged (required) ValueChanged<double> Called when the user has select a new value.
onChangeStart ValueChanged<double> Called when the user is starts selecting a new value.
onChangeEnd ValueChanged<double> Called when the user is done selecting a new value.
min double Maximum value that can be selected.
max double Minimum value that can be selected.
divisions int Numbe of discrete divisions. If null, the slider is continuous.
label String Label to show above the slider.
activeColor class Color Color of active portion.
inactiveColor class Color Color of inactive portion.
semanticFormatterCallback class SemanticFormatterCallback Callback used to create a semantic value. Default is percentage.

Code Example

Here is the code example of using Slider. In this example, the value is stored as integer, which means it must be casted to double first when passed as value argument and rounded to integer inside onChanged. The active portion is colored red, while the inactive portion is colored black.

  import 'package:flutter/material.dart';
  
  void main() => runApp(SliderExample());
  
  class SliderExample extends StatefulWidget {
    @override
    _SliderExampleState createState() {
      return _SliderExampleState();
    }
  }
  
  class _SliderExampleState extends State {
    int _value = 6;
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Slider Tutorial',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Slider Tutorial'),
          ),
          body: Padding(
            padding: EdgeInsets.all(15.0),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Icon(
                    Icons.ac_unit,
                    size: 30,
                  ),
                  new Expanded(
                    child: Slider(
                        value: _value.toDouble(),
                        min: 1.0,
                        max: 10.0,
                        divisions: 10,
                        activeColor: Colors.red,
                        inactiveColor: Colors.black,
                        label: 'Set a value',
                        onChanged: (double newValue) {
                          setState(() {
                            _value = newValue.round();
                          });
                        },
                        semanticFormatterCallback: (double newValue) {
                          return '${newValue.round()} dollars';
                        }
                    )
                  ),
                ]
              )
            ),
          )
        ),
      );
    }
  }

You can try to run the code above and modify it according to your need.

You can also read about: