Slider

CLI

To generate a specific style for customization:

dart run forui style create sliders

Usage

`FSlider(...)`

1FSlider(
2  style: const .delta(thumbSize: 20),
3  enabled: true,
4  layout: .ltr,
5  marks: const [
6    FSliderMark(value: 0),
7    FSliderMark(value: 0.5),
8    FSliderMark(value: 1),
9  ],
10)

`FSliderMark(...)`

1FSliderMark(
2  style: null,
3  value: 0.5,
4  tick: true,
5  label: Text('50%'),
6)

Examples

Appearance

Labelled

Disabled

Error

Marks

Marks provide visual reference points on the slider track. Each mark consists of:

A tick: A visual indicator showing the mark's position
A label: Text describing the mark's value (optional)

Layouts and Selections

Discrete Values

Range Selection

Selection Boundaries

Vertical Orientation

Interactions

Slide Track

Slide anywhere on the track or thumb to select a value.

Slide Thumb

Slide the thumb to select a value.

Tap

Tap anywhere on the track to select a value.

Tap and Slide Thumb

Tap anywhere or slide the thumb to select a value.

CLI