Slider Widget in Flutter

Mercy Jemosop
3 min readJul 1, 2021

Slider is a class in flutter which is used to select from a large range of values. This material design widget can be used as an input widget where a user can select an input from a large range of values by dragging or pressing the required value.

The values selected can be either continues or discrete values. Continuous range of values are the default for a slider class, it ranges from max to min . The values in a continuous are not fixed values and can change depending on different situations. Continuous values are mainly numeric values example :

Height could be any value (within the range of human heights), not just certain fixed heights. Length of a ruler

Discrete range of values, it uses a non-null value for divisions, which indicates the number of discrete intervals. Discrete values can be numeric or categorical

The number of students in a class, amount of money in your bank account, the results of rolling a dice. All these values are constant and don’t change over time.

Slider Structure

Slider Structure

min value(Label 1), the minimum value that can be selected from the range.

max value(Label 4) , the maximum value that can be selected from the range.

value indicator(Label 3), which is a shape that pops up when the user is dragging the thumb to indicate the value being selected.

thumb(Label 2), which is a shape that slides horizontally when the user drags it.

active side(Label 1 to Label 2), active side of the slider is the side between the thumb and the minimum value.

“inactive” side(Label 2 to Label 4),The “inactive” side of the slider is the side between the thumb and the maximum value.

Slider Properties

onChanged method is called during a drag when the user is selecting a new value for the slider by dragging.The slider passes the new value(double) to the callback but does not actually change state until the parent widget rebuilds the slider with the new value.

active color, the color to use for the portion of the slider track that is active. This is the actual length you want to set.

inactive color, the color to use for the portion of the slider track that is inactive, not inside the range.

Check other properties in the flutter documentation to add to your slider widget.

Implement a Slider in Flutter

Slider widget implementation

Demo Example

Slider example

--

--

Mercy Jemosop

Software Developer. I am open to job referrals. connect with me on twitter @kipyegon_mercy