Slider

Preview

About

A HeroUI-style slider: pill-shaped track with a white thumb nested 2px inside it. KasySlider picks a single value; KasyRangeSlider picks a range (two thumbs).

• value / values: the current value (KasySlider) or RangeValues (KasyRangeSlider).
• onChanged / onChangeEnd: callbacks for continuous changes and for when the drag ends. Without onChanged, the slider is disabled.
• min, max: value bounds (default 0 to 1).
• divisions: when set, the value snaps to steps, with dots marking each division on the track.
• label / valueText: optional header above the track (label on the left, value on the right).
• marks: list of texts shown below the track (e.g. the "Min"/"Max" endpoints).
• color: overrides the accent color (defaults to context.colors.primary).
• tooltip: a (double) => String function that, when set, shows a value bubble floating above the thumb.

KasyRangeSlider shares the same props (with values/onChanged pluralized) and automatically picks which of the two thumbs to move based on touch position.

Last updated on 08/23/2026