Slider

CLI

To generate and customize this style:

dart run forui style create slider

Usage

FSlider(
  control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.6)),
);

`FSlider(...)`

FSlider(
  control: FSliderControl.managedContinuous(
    initial: FSliderValue(max: 0.75, constraints: (min: 0, max: 0.8)),
    interaction: FSliderInteraction.tap,
    onChange: (value) {},
  ),
  style: (style) => style.copyWith(...),
  layout: FLayout.rtl,
  tooltipBuilder: (style, value) => Text('${value.toStringAsFixed(2)}%'),
  marks: const [
    FSliderMark(value: 0, label: Text('0%')),
    FSliderMark(value: 0.5, label: Text('50%')),
    FSliderMark(value: 1, label: Text('100%')),
  ],
  onEnd: (value) {},
);

Examples

Appearance

Labelled

FSlider(
  control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.6)),
  label: const Text('Volume'),
  description: const Text('Adjust the volume by dragging the slider.'),
);

Disabled

FSlider(
  control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.6)),
  label: const Text('Volume'),
  description: const Text('Adjust the volume by dragging the slider.'),
  enabled: false,
);

Error

FSlider(
  control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.6)),
  label: const Text('Volume'),
  description: const Text('Adjust the volume by dragging the slider.'),
  forceErrorText: 'Volume is too high.',
);

FSlider(
  control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.6)),
  tooltipBuilder: (style, value) {
    final hex = (value * 100).round().toRadixString(16).padLeft(2, '0');
    return Text('0x$hex');
  },
);

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)

FSlider(
  control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.35)),
  marks: const [
    FSliderMark(value: 0, label: Text('0%')),
    FSliderMark(value: 0.25, tick: false),
    FSliderMark(value: 0.5),
    FSliderMark(value: 0.75, tick: false),
    FSliderMark(value: 1, label: Text('100%')),
  ],
);

Layouts and Selections

Discrete Values

FSlider(
  control: FSliderControl.managedDiscrete(initial: FSliderValue(max: 0.25)),
  marks: const [
    FSliderMark(value: 0, label: Text('0%')),
    FSliderMark(value: 0.25, tick: false),
    FSliderMark(value: 0.5),
    FSliderMark(value: 0.75, tick: false),
    FSliderMark(value: 1, label: Text('100%')),
  ],
);

Range Selection

FSlider(
  control: FSliderControl.managedContinuousRange(initial: FSliderValue(min: 0.25, max: 0.75)),
);

Selection Boundaries

FSlider(
  control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.6, constraints: (min: 0.25, max: 0.75))),
);

Vertical Orientation

FSlider(
  control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.35)),
  label: const Text('Volume'),
  description: const Text('Adjust the volume by dragging the slider.'),
  layout: FLayout.btt,
  trackMainAxisExtent: 350,
  marks: const [
    FSliderMark(value: 0, label: Text('0%')),
    FSliderMark(value: 0.25, tick: false),
    FSliderMark(value: 0.5, label: Text('50%')),
    FSliderMark(value: 0.75, tick: false),
    FSliderMark(value: 1, label: Text('100%')),
  ],
);

Interactions

Slide Track

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

FSlider(
  control: FSliderControl.managedContinuous(
    initial: FSliderValue(max: 0.6),
    interaction: FSliderInteraction.slide,
  ),
);

Slide Thumb

Slide the thumb to select a value.

FSlider(
  control: FSliderControl.managedContinuous(
    initial: FSliderValue(max: 0.6),
    interaction: FSliderInteraction.slideThumb,
  ),
);

Tap

Tap anywhere on the track to select a value.

FSlider(
  control: FSliderControl.managedContinuous(
    initial: FSliderValue(max: 0.6),
    interaction: FSliderInteraction.tap,
  ),
);

Tap and Slide Thumb

Tap anywhere or slide the thumb to select a value.

FSlider(
  control: FSliderControl.managedContinuous(
    initial: FSliderValue(max: 0.6),
    interaction: FSliderInteraction.tapAndSlideThumb,
  ),
);

Form

class SliderForm extends StatefulWidget {
  @override
  State<SliderForm> createState() => _SliderFormState();
}

class _SliderFormState extends State<SliderForm> {
  final _key = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) => Form(
    key: _key,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        FSlider(
          control: FSliderControl.managedContinuous(initial: FSliderValue(max: 0.35)),
          label: const Text('Brightness'),
          description: const Text('Adjust the brightness level.'),
          marks: const [
            FSliderMark(value: 0, label: Text('0%')),
            FSliderMark(value: 0.25, tick: false),
            FSliderMark(value: 0.5, label: Text('50%')),
            FSliderMark(value: 0.75, tick: false),
            FSliderMark(value: 1, label: Text('100%')),
          ],
        ),
        const SizedBox(height: 20),
        FButton(
          child: const Text('Save'),
          onPress: () {
            if (!_key.currentState!.validate()) {
              // Handle errors here.
              return;
            }

            _key.currentState!.save();
            // Do something.
          },
        ),
      ],
    ),
  );
}

CLI