Slider

The Slider Widget is useful for users to select and adjust values.
Here we explain how to use the Slider Widget provided by Flutter and examples of its application.

• Slider

Slider consists of a horizontal or vertical bar and a knob (handle) to move over it.
The slider can be deactivated by setting the value of onChanged to Null.

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

divisions allows you to set how many steps you want the Slider Widget to have.
The Slider will be divided into the number of divisions you set, allowing you to select values in stages.

It is also useful to use the label option to indicate what value is selected.

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

• RangeSlider

To get a certain range of values from the user, RangeSlider can be used.
The difference with Slider is that value and label must be defined using their own class.

It should also be noted, though, that the values that can be received onChanged are also changed to RangeValues,
Other than what has been mentioned, there is no significant difference in the feel between Slider and RangeSlider.

RangeSlider(
  values: sliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  labels: RangeLabels(
    sliderValue.start.round().toString(),
    sliderValue.end.round().toString(),
  ),
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  }
),

activeColor: background and button color below the selected value
inactiveColor: background color above the selected value
The Slider Widget allows you to specify colors in detail by changing values such as

Slider(
  activeColor: Colors.blue,
  inactiveColor: Colors.blue[100],
  value: sliderValue,
  max: 100,
  divisions: 5,
  label: sliderValue.round().toString(),
  min: 0,
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  }
),

For further information, please refer to the official documentation below.

• Slider()
• RangeSlider()