Slider widget in Flutter

Introduction

A slider lets users pick a value by moving a thumb along a line. It is easy and quick to choose numbers or settings.

Adjusting volume or brightness in a media app

Selecting a price range in a shopping app

Setting the speed of a game character

Choosing a rating or score

Controlling the size or zoom level of an image

Syntax

Flutter

Slider(
  value: currentValue,
  min: minValue,
  max: maxValue,
  onChanged: (newValue) {
    setState(() {
      currentValue = newValue;
    });
  },
)

value is the current position of the slider thumb.

onChanged updates the value when the user moves the slider.

Examples

A slider initially at 50. User can drag the thumb, but since onChanged does nothing, the value doesn't update and the thumb snaps back.

Flutter

Slider(
  value: 50,
  min: 0,
  max: 100,
  onChanged: (value) {},
)

A slider to control volume from 0 to 10, updating state on change.

Flutter

Slider(
  value: volume,
  min: 0,
  max: 10,
  onChanged: (val) => setState(() => volume = val),
)

Sample App

This app shows a slider from 0 to 100 with steps of 5 (because divisions=20). The current value is shown below the slider and updates as you move the thumb.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _sliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Slider Example')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Slider(
                value: _sliderValue,
                min: 0,
                max: 100,
                divisions: 20,
                label: _sliderValue.round().toString(),
                onChanged: (value) {
                  setState(() {
                    _sliderValue = value;
                  });
                },
              ),
              Text('Value: ${_sliderValue.toStringAsFixed(1)}'),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Use divisions to make the slider snap to fixed steps.

The label shows a tooltip above the thumb while dragging.

Always update the slider value inside setState to refresh the UI.

Summary

Slider lets users pick a number by sliding a thumb along a line.

Set value, min, max, and onChanged to make it interactive.

Use divisions and label for better user experience.