Slider

An input where the user selects a value from within a given range.

Usage

FSlider(...)

FSlider(
  layout: Layout.rtl,
  tooltipBuilder: (style, value) => Text('${(value.toStringAsFixed(2)}%'),
  controller: FContinuousSliderController(
    allowedInteraction: FSliderInteraction.tap,
    selection: FSliderSelection(max: 0.75, extent: (min: 0, max: 0.6)),
  ),
  marks: const [
    FSliderMark(value: 0, label: const Text('0%')),
    FSliderMark(value: 0.5, label: const Text('50%')),
    FSliderMark(value: 1, label: const Text('100%')),
  ],
);

Examples

Appearance

Labelled

Disabled

Error

Tooltip

Marks

A mark consists of a tick - a visual indicator of the mark's position on the slider - and a label - a text that describes the mark's value.

Layouts and Selections

Discrete Selection

Range Selection

Min & Max Selection Extent

Vertical Layout

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.

Form