The Slider Widget to define ranges in Flutter

When you develop a Flutter app, sooner or later you run into the Slider, that sliding control so common on the web, Android, or iOS that allows you to indicate a value within a range. Something I've always liked about the Slider in Flutter is that it's self-explanatory: you declare it, pass it value, min, max... and you have it working.

The slider is a component that you can find on multiple types of platforms, such as the web and, of course, as a basis in Android and iOS application development environments to indicate a range of values based on a lower and upper quota.

We are going to learn how to use the Slider widget in Flutter; it is a quite simple plugin to use and we are going to see what its fundamental and other very interesting properties are.

In this guide, I teach you everything: from basic use to advanced customization with SliderTheme, including practical tricks that I myself apply when working with sliders.

Remember that we previously left off with the Card type Widget in Flutter.

What the Slider in Flutter is and what it's for

A Slider is a widget that allows you to select a continuous value within a range. You'll see it in cases like:

• Choosing age, volume level, brightness, or intensity.
• Adjusting numerical parameters without typing text.
• Controlling filters (minimum/maximum price, temperature, etc.).

And when you need to select two values, the one that comes into play is the RangeSlider, ideal for price ranges or double filters.

Something I always highlight when I explain this is that Flutter integrates Slider natively, without the need for external packages.

How the Slider works: basic structure

StatefulWidget and state management

A Slider absolutely requires state because, so that you can see when its value changes (when the user moves the control), the setState method is used to redraw the widget:

double rating = 50;
return Slider(
 value: rating,
 min: 0,
 max: 100,
 onChanged: (newRating) {
   setState(() => rating = newRating);
 },
);

The key thing here is that setState(), which updates the value internally. Without it, the slider won't move.

Essential properties (value, min, max, onChanged)

Other properties that are highly, highly recommended to use along with the Slider would be label, to show a label or text every time the user is updating the Slider's value from the interface; you can also apply divisions for greater control of the Slider:

   return Slider(
      label: "$raiting",
      value: raiting,
      divisions: 4,
      min: 0,
      max: 100,
      onChanged: (newRaiting) {
        setState(() {
          raiting = newRaiting;
        });
      }
    );

• value: the current value.
• min / max: range limits.
• onChanged: function that runs when the slider is moved.
• label: (optional) text that appears above the thumb.
• divisions: how many intermediate steps there are.

With the code above, we get the following:

Minimum configuration of the Flutter Slider

We are going to present the source code of the first example and then we will analyze it a bit:

   return Slider(
      value: raiting,
      min: 0,
      max: 100,
      onChanged: (newRaiting) {
        setState(() {
          raiting = newRaiting;
        });
      }
    );

With this simple code that is practically self-explanatory, and that is one of the interesting aspects that Flutter has; we get the following:

Statefulwidget to allow updating the slider's state

The first thing you have to keep in mind is that for this widget to handle ranges, you absolutely must establish a StatefulWidget to be able to update the widget's state every time the user changes the value; for this reason, you will see the setState function on the rating.

Mandatory properties

We also must define the min property and the max property by force to indicate the minimum and maximum value of the slider's range; of course, you also have to indicate the value to indicate its initial value.

Basic Slider example in Flutter

Code and step-by-step explanation

Here is an example of age selection, one of the most common uses:

double _age = 18;
Slider(
 value: _age,
 min: 10,
 max: 100,
 divisions: 90,
 label: _age.toInt().toString(),
 onChanged: (double newValue) {
   setState(() => _age = newValue);
 },
);

What happens internally when the user moves the slider

• The user moves the thumb.
• Flutter executes onChanged(newValue).
• You update _age.
• setState() redraws the widget.
• The slider reflects the new value.

That natural behavior is part of what makes the widget very easy to integrate.

Slider Customization

This is where most tutorials fall short. Flutter allows you to customize practically everything.

Change colors (activeColor, inactiveColor)

Slider(
 value: _age,
 min: 10,
 max: 100,
 activeColor: Colors.blue,
 inactiveColor: Colors.grey,
 onChanged: (newValue) => setState(() => _age = newValue),
)

I usually use this when I want the slider color to match the app's branding.

Add divisions and label with the value

I always recommend using divisions when you want more precise control:

divisions: 4, 
label: "$rating",

This greatly improves the UX when you don't want weird floating values.

Customize the thumb (cursor)

You can modify size, shape, or style:

SliderTheme(
 data: SliderTheme.of(context).copyWith(
   thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12),
 ),
 child: Slider(...),
)

Modify the track and its thickness

SliderTheme(
 data: SliderTheme.of(context).copyWith(trackHeight: 8),
 child: Slider(...),
)

Show tooltip or value indicator

SliderTheme(
 data: SliderTheme.of(context).copyWith(
   showValueIndicator: ShowValueIndicator.always,
 ),
 child: Slider(
   value: _age,
   label: _age.toString(),
   onChanged: (newValue) => setState(() => _age = newValue),
 ),
)

This is one of the best things about using interactive sliders since it always helps the user know exactly what they are selecting.

RangeSlider: select a range of values

Basic RangeSlider example

RangeValues _range = const RangeValues(40, 80);
RangeSlider(
 values: _range,
 min: 0,
 max: 100,
 divisions: 5,
 labels: RangeLabels(
   _range.start.round().toString(),
   _range.end.round().toString(),
 ),
 onChanged: (values) {
   setState(() => _range = values);
 },
)

Key differences between Slider and RangeSlider

Feature    Slider    RangeSlider
Selection    1 value    2 values
When to use it    Age, volume    Prices, double filters
Complexity    Low    Medium

SliderTheme: advanced customization

With SliderTheme we can override the styles that are used by default in the app.

Global styles vs. local styles

• Local: affects only one slider.
• Global: changes the style for the entire app.

Example using SliderTheme:

SliderTheme(
 data: SliderTheme.of(context).copyWith(
   activeTrackColor: Colors.deepPurple,
   inactiveTrackColor: Colors.deepPurple.shade100,
   thumbColor: Colors.purple,
   overlayColor: Colors.purple.withOpacity(0.2),
 ),
 child: Slider(
   value: value,
   min: 0,
   max: 100,
   onChanged: (v) => setState(() => value = v),
 ),
)

Best practices when using Slider in real apps

When to use Slider and when to avoid it

Use it if:

• Precision is not extreme.
• The user needs to select quickly.
• The value is intuitive when sliding.
• Avoid it if you need surgical precision (a TextField or Stepper is better there).
• Limits, divisions, and user experience
  • At first, I left sliders without divisions and it generated weird floating values like 72.48321.
    • Nowadays, I always think about divisions according to the use case.
  • Tips based on real experience
    • Add a label when you want the user to see the exact value.
    • Use RangeSlider for complex filters, don't try to “simulate” it with two normal sliders.
    • If the slider controls something critical (e.g., power), use value-dependent colors.

Frequently Asked Questions about Slider in Flutter

• How do you change the Slider's color?
  • With activeColor and inactiveColor.
• How do you completely customize the Slider?
  • With SliderTheme.
• How do you show the value above the thumb?
  • Use label: and activate the value indicator with SliderTheme.
• What is the difference between Slider and RangeSlider?
  • One selects a single value; the other, a full range.

Conclusion

The Slider widget in Flutter is as simple as it is powerful. With just a few lines, you already have something functional, but with SliderTheme and good use of states, you can build completely custom sliding controls. I've always liked how intuitive this widget is, and I hope this guide leaves you ready to integrate it into any app with your own style.

The next widget is the Dismissible type in Flutter.