Slider – Forui (original) (raw)

A sliding input component that allows users to select a value within a specified range by dragging a handle or tapping on the track.

Usage

Preview

FSlider(...)

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

Examples

Appearance

Labelled

Preview

Disabled

Preview

Error

Preview

Tooltip

Preview

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)

Preview

Layouts and Selections

Discrete Values

Preview

Range Selection

Preview

Selection Boundaries

Preview

Vertical Orientation

Preview

Interactions

Slide Track

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

Preview

Slide Thumb

Slide the thumb to select a value.

Preview

Tap

Tap anywhere on the track to select a value.

Preview

Tap and Slide Thumb

Tap anywhere or slide the thumb to select a value.

Preview

Form

Preview

Last updated on

May 7, 2025

Select GroupSwitch