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.

Practice

1. What is the main purpose of the Slider widget in Flutter?

easy

A. To display a list of items vertically

B. To let users select a value by sliding a thumb along a line

C. To create a button that changes color when pressed

D. To show an image with zoom controls

Solution

1. Step 1: Understand the Slider widget function

   The Slider widget allows users to pick a numeric value by moving a thumb along a horizontal line.

2. Step 2: Compare with other widget purposes

   Other options describe different widgets: lists, buttons, images, which are unrelated to Slider.

3. Final Answer:

   To let users select a value by sliding a thumb along a line -> Option B

4. Quick Check:

   Slider = select value by sliding [OK]

Hint: Slider is for picking values by sliding [OK]

Common Mistakes:

• Confusing Slider with ListView or Button widgets
• Thinking Slider is for displaying images
• Assuming Slider is a static display widget

2. Which of the following is the correct way to create a basic Slider with a value of 0.5, minimum 0, maximum 1, and a simple onChanged callback?

easy

A. Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v))

B. Slider(value: 0.5, minimum: 0, maximum: 1, onChange: (v) => print(v))

C. Slider(val: 0.5, min: 0, max: 1, onChanged: (v) => print(v))

D. Slider(value: 0.5, min: 0, max: 1)

Solution

1. Step 1: Check property names

   The Slider widget uses value, min, max, and onChanged properties exactly as in Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v)).

2. Step 2: Validate callback presence

   Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v)) includes a valid onChanged callback. Slider(value: 0.5, min: 0, max: 1) misses it, causing an error.

3. Final Answer:

   Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v)) -> Option A

4. Quick Check:

   Correct property names and onChanged callback = Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v)) [OK]

Hint: Use exact property names: value, min, max, onChanged [OK]

Common Mistakes:

• Using wrong property names like minimum or onChange
• Omitting onChanged callback causing errors
• Using val instead of value

3. What will be printed when the user moves the slider thumb to the middle position in this code?

double sliderValue = 0.0;
Slider(
  value: sliderValue,
  min: 0,
  max: 10,
  divisions: 10,
  label: (value) => value.round().toString(),
  onChanged: (double value) {
    print(value);
  },
)

medium

A. 5.0

B. 0.5

C. 10.0

D. 1.0

Solution

1. Step 1: Understand slider range and divisions

   The slider ranges from 0 to 10 with 10 divisions, so each step is 1 unit.

2. Step 2: Calculate middle position value

   The middle position is halfway, so value = (max + min) / 2 = (10 + 0) / 2 = 5.0.

3. Final Answer:

   5.0 -> Option A

4. Quick Check:

   Middle of 0 to 10 with 10 steps = 5.0 [OK]

Hint: Middle value = (min + max) / 2 with divisions [OK]

Common Mistakes:

• Confusing divisions with decimal steps
• Using 0.5 instead of 5.0 for middle
• Ignoring divisions and assuming continuous values

4. Identify the error in this Slider code snippet:

Slider(
  value: 5,
  min: 0,
  max: 10,
  onChanged: null,
)

medium

A. min must be greater than max

B. value must be a string, not a number

C. onChanged is null, making the slider non-interactive

D. Slider requires a label property

Solution

1. Step 1: Check onChanged property requirement

   The Slider widget requires a non-null onChanged callback to be interactive. Setting it to null disables the slider.

2. Step 2: Validate other properties

   Value is correctly a number within min and max. Label is optional.

3. Final Answer:

   onChanged is null, making the slider non-interactive -> Option C

4. Quick Check:

   onChanged null = disabled slider [OK]

Hint: Always provide a non-null onChanged callback [OK]

Common Mistakes:

• Setting onChanged to null disables slider
• Confusing value type as string
• Thinking label is mandatory

5. You want a Slider that lets users pick only whole numbers from 1 to 5 and shows the current value as a label. Which code snippet correctly implements this?

hard

A. Slider(value: 3, min: 1, max: 5, label: (v) => v.round().toString(), onChanged: (v) => print(v))

B. Slider(value: 3, min: 1, max: 5, divisions: 5, label: (v) => v.round().toString(), onChanged: (v) => print(v))

C. Slider(value: 3, min: 0, max: 5, divisions: 5, label: (v) => v.round().toString(), onChanged: (v) => print(v))

D. Slider(value: 3, min: 1, max: 5, divisions: 4, label: (v) => v.round().toString(), onChanged: (v) => print(v))

Solution

1. Step 1: Set min, max, and divisions for whole numbers

   To allow whole numbers from 1 to 5, min=1, max=5, and divisions=4 (steps between 1 and 5) are correct.

2. Step 2: Include label and onChanged callback

   Label shows current value, and onChanged is required for interactivity.

3. Final Answer:

   Slider(value: 3, min: 1, max: 5, divisions: 4, label: (v) => v.round().toString(), onChanged: (v) => print(v)) -> Option D

4. Quick Check:

   Divisions = max - min = 4 for whole steps [OK]

Hint: Divisions = max - min for whole number steps [OK]

Common Mistakes:

• Setting divisions equal to max instead of max-min
• Omitting divisions for discrete steps
• Setting min to 0 when range starts at 1