Slider

The Slider widget is an input control for picking a single value from a fixed range by dragging.
Use it to adjust continuous values such as volume, brightness, or a ratio.

Definition and role

The Slider widget lets you drag the thumb along a horizontal track to pick a value between min and max. Use divisions to split the track into equal steps so only discrete values can be chosen, and set the track, tick mark, and thumb colors along with the track thickness.

• Category: Contents
• Default range: min 0.0 to max 1.0
• Default value: 0.0
• Default size (SizedBox): 100 wide, 50 tall
• Slider types: material (default) / adaptive

Features

Feature	Description
Value selection	Drag the thumb along the track to pick a value between min and max.
Step division	Use divisions to split the track into equal steps so only discrete values can be chosen. Leave it unset for continuous values.
Slider type	Choose between material (default) and adaptive, which adapts to the platform.
Color and track settings	Set the colors of the active and inactive track, the tick marks, the thumb, and the overlay, plus the track thickness.
Value change event	Use onChanged to hook up an action that runs whenever the value changes during a drag.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the Slider item onto the canvas.
3. In the properties panel on the right, set the value range with min and max.
4. If needed, split the range into steps with divisions, then adjust the track and thumb colors and trackHeight.
5. Hook up the action — logic or a script — that should run on a value change to onChanged.

Properties

Property	Description	Default	Value / Type
sliderType	Slider type	material	material, adaptive
value	Currently selected value	0.0	Number
min	Lowest value that can be selected	0.0	Number
max	Highest value that can be selected	1.0	Number
divisions	Number of steps to split the track into (discrete values). Leave unset for continuous values	Not set	Integer (1 or greater)
trackHeight	Track thickness	Not set	Number
activeTrackColor	Track color left of the thumb — the selected range	Not set	Color
inactiveTrackColor	Track color right of the thumb — the unselected range	Not set	Color
activeTickMarkColor	Tick mark color in the selected range	Not set	Color
inactiveTickMarkColor	Tick mark color in the unselected range	Not set	Color
thumbColor	Thumb color	Not set	Color
overlayColor	Color of the overlay that appears when you press the thumb	Not set	Color
focusNode	Focus node used for focus control	Not set	Focus node
autofocus	Whether to take focus automatically when the widget appears	false	true / false

Notes and tips

tip

Set divisions and the value snaps to equal steps instead of moving continuously. Leave it unset and you can pick any value between min and max.

note

activeTrackColor applies to the selected range left of the thumb, and inactiveTrackColor applies to the unselected range on the right.

Learn more

tip

For the full set of Widget Controls (Property, Method, and Event) that let you drive this widget from a script, see Slider Widget Control.