Slider

The Slider allows users to select a single value within a defined range (e.g., 0–100). It has a track and one draggable thumb that users can slide horizontally (or vertically) to adjust the value.

Sliders are ideal for quick, touch-friendly value selection without typing.

Use Cases

Use the Slider when you want the user to pick one value, for example:

• Volume / brightness / opacity controls

• Progress or intensity settings (e.g., difficulty level, animation speed)

• Single-value filters (e.g., “within 5 km”, “up to ₹1000”)

• Percentage inputs (0–100%) like completion, transparency, rating weight

• Any setting where a continuous or stepped value is meaningful and doesn’t require precise text input.

Core Concepts

Single-Thumb Control

Unlike the Range Slider, the Slider has one thumb:

• Thumb → represents the current value on the track.

The user drags this thumb to increase or decrease the value.

Value Range

Internally, the Slider works with:

• Minimum bound (min)

• Maximum bound (max)

• Current value between them (value)

You can think of it as a controlled numeric input represented visually.

Visual Feedback

• The active segment of the track (from min to current value) is usually highlighted.

• The inactive segment (from current value to max) is shown in a lighter or muted color.

• The thumb clearly shows the current value position at a glance.

Interactive Control / Settings

Sliders often drive live updates:

• Adjusting a slider can update previews (e.g., font size, zoom level)

• Live filtering of results (e.g., only show items under X price/value)

• Smooth UX for quickly trying out different values without typing.

Properties

Property	Description
min	The minimum value allowed by the slider.
max	The maximum value allowed by the slider.
division	The number of discrete divisions/steps on the slider. If set, the value snaps to these.
value	The current value of the slider thumb.
activeColor	The color of the track from min to the current value (filled/selected portion).
inactiveColor	The color of the track from the current value to max (unselected portion).
thumbColor	The color of the draggable thumb.
thumbRadius	The radius/size of the thumb, controlling how big it appears.
trackHeight	The height/thickness of the slider track.
onChanged	An action/callback triggered whenever the user drags the thumb and the value changes.

Default Properties

The Slider widget supports all Default Properties.