Flutter Slider

A slider is a material design widget used for selecting a value from a range. It is an input widget on which you can set a range of values by dragging the slider on clicking on the position. In this article, we are going to learn how to use the slider widget.

It can be used to select value from a continuous or discrete set of values. By default, it is a continuous range. For discrete values we must add a non-null value for divisions.

Slider Properties:

Attributes Type Descriptions
value double This is a required argument and it is used for specifying the slider’s selected value.
onChanged double This is also a required argument and is called while dragging the slider to select a new value for the slider
onChangedStart double This is an optional argument and it is called when we start selecting.
max double It is an optional argument and we set the maximum value that can be selected by the user. By default, it is 1.0.
min double It is an optional argument and we set the minimum value that can be selected by the user. By default, it is 0.0.
divisions int determines the number of discrete divisions in the slider. If null, the slider is continuous.
label string specifies the text label that will be shown.
activeColor class Color the color of the active slider position
Example
 import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
// This Widget is the main application widget.  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MySliderApp(),  
    );  
  }  
}  
  
class MySliderApp extends StatefulWidget {  
  MySliderApp({Key key}) : super(key: key);  
  
  @override  
  _MySliderAppState createState() => _MySliderAppState();  
}  
  
class _MySliderAppState extends State {  
  int _value = 6;  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Slider Demo'),  
        ),  
        body: Padding(  
          padding: EdgeInsets.all(15.0),  
            child: Center(  
                child: Row(  
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
                    mainAxisSize: MainAxisSize.max,  
                    children: [  
                      Icon(  
                        Icons.volume_up,  
                        size: 40,  
                      ),  
                      new Expanded(  
                          child: Slider(  
                            value: _value.toDouble(),  
                            min: 1.0,  
                            max: 20.0,  
                            divisions: 10,  
                            activeColor: Colors.green,  
                            inactiveColor: Colors.orange,  
                            label: 'Set volume value',  
                            onChanged: (double newValue) {  
                              setState(() {  
                                _value = newValue.round();  
                                });  
                              },  
                              semanticFormatterCallback: (double newValue) {  
                                return '${newValue.round()} dollars';  
                              }  
                            )  
                      ),  
                    ]  
                )  
            ),  
          )  
      );  
  }  
}
Output

flutter-slider-demo

Flutter Range Slider

This is a highly customizable component that helps us select multiple values from a range of values. This can be used as a continuous or discrete slider.

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
// This Widget is the main application widget.  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MySliderApp(),  
    );  
  }  
}  
  
class MySliderApp extends StatefulWidget {  
  MySliderApp({Key key}) : super(key: key);  
  
  @override  
  _MySliderAppState createState() => _MySliderAppState();  
}  
  
class _MySliderAppState extends State {  
  RangeValues _currentRangeValues = const RangeValues(20, 60);  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
        appBar: AppBar(  
          title: Text('Flutter Range Slider Demo'),  
        ),  
        body: Padding(  
          padding: EdgeInsets.all(15.0),  
          child: Center(  
              child: Row(  
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
                  mainAxisSize: MainAxisSize.max,  
                  children: [  
                    Icon(  
                      Icons.volume_up,  
                      size: 40,  
                    ),  
                    new Expanded(  
                        child: RangeSlider(  
                          values: _currentRangeValues,  
                          min: 0,  
                          max: 100,  
                          divisions: 10,  
                          labels: RangeLabels(  
                            _currentRangeValues.start.round().toString(),  
                            _currentRangeValues.end.round().toString(),  
                          ),  
                          onChanged: (RangeValues values) {  
                            setState(() {  
                              _currentRangeValues = values;  
                            });  
                          },  
                        )  
                    ),  
                  ]  
              )  
          ),  
        )  
    );  
  }  
}  
Output
flutter-range-slider-example-1
flutter-range-slider-example-2
Subscribe Now