Slider

CLI

To generate and customize this style:

dart run forui style create slider

Usage

1@override
2Widget build(BuildContext context) =>
3    FSlider(control: .managedContinuous(initial: FSliderValue(max: 0.6)));
4

`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

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(initial: FSliderValue(max: 0.6)),
4  label: const Text('Volume'),
5  description: const Text('Adjust the volume by dragging the slider.'),
6);
7

Disabled

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(initial: FSliderValue(max: 0.6)),
4  label: const Text('Volume'),
5  description: const Text('Adjust the volume by dragging the slider.'),
6  enabled: false,
7);
8

Error

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(initial: FSliderValue(max: 0.6)),
4  label: const Text('Volume'),
5  description: const Text('Adjust the volume by dragging the slider.'),
6  forceErrorText: 'Volume is too high.',
7);
8

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(initial: FSliderValue(max: 0.6)),
4  tooltipBuilder: (style, value) {
5    final hex = (value * 100).round().toRadixString(16).padLeft(2, '0');
6    return Text('0x$hex');
7  },
8);
9

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)

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(initial: FSliderValue(max: 0.35)),
4  marks: const [
5    .mark(value: 0, label: Text('0%')),
6    .mark(value: 0.25, tick: false),
7    .mark(value: 0.5),
8    .mark(value: 0.75, tick: false),
9    .mark(value: 1, label: Text('100%')),
10  ],
11);
12

Layouts and Selections

Discrete Values

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedDiscrete(initial: FSliderValue(max: 0.25)),
4  marks: const [
5    .mark(value: 0, label: Text('0%')),
6    .mark(value: 0.25, tick: false),
7    .mark(value: 0.5),
8    .mark(value: 0.75, tick: false),
9    .mark(value: 1, label: Text('100%')),
10  ],
11);
12

Range Selection

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuousRange(
4    initial: FSliderValue(min: 0.25, max: 0.75),
5  ),
6);
7

Selection Boundaries

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(
4    initial: FSliderValue(
5      max: 0.6,
6      constraints: (min: 0.25, max: 0.75),
7    ),
8  ),
9);
10

Vertical Orientation

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(initial: FSliderValue(max: 0.35)),
4  label: const Text('Volume'),
5  description: const Text('Adjust the volume by dragging the slider.'),
6  layout: .btt,
7  trackMainAxisExtent: 350,
8  marks: const [
9    .mark(value: 0, label: Text('0%')),
10    .mark(value: 0.25, tick: false),
11    .mark(value: 0.5, label: Text('50%')),
12    .mark(value: 0.75, tick: false),
13    .mark(value: 1, label: Text('100%')),
14  ],
15);
16

Interactions

Slide Track

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

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(
4    initial: FSliderValue(max: 0.6),
5    interaction: .slide,
6  ),
7);
8

Slide Thumb

Slide the thumb to select a value.

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(
4    initial: FSliderValue(max: 0.6),
5    interaction: .slideThumb,
6  ),
7);
8

Tap

Tap anywhere on the track to select a value.

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(
4    initial: FSliderValue(max: 0.6),
5    interaction: .tap,
6  ),
7);
8

Tap and Slide Thumb

Tap anywhere or slide the thumb to select a value.

1@override
2Widget build(BuildContext context) => FSlider(
3  control: .managedContinuous(
4    initial: FSliderValue(max: 0.6),
5    interaction: .tapAndSlideThumb,
6  ),
7);
8

Form

1class SliderFormExample extends StatefulWidget {
2  @override
3  State<SliderFormExample> createState() => _SliderFormExampleState();
4}
5
6class _SliderFormExampleState extends State<SliderFormExample> {
7  final _key = GlobalKey<FormState>();
8
9  @override
10  Widget build(BuildContext context) => Form(
11    key: _key,
12    child: Column(
13      mainAxisAlignment: .center,
14      crossAxisAlignment: .start,
15      spacing: 20,
16      children: [
17        FSlider(
18          control: .managedContinuous(initial: FSliderValue(max: 0.35)),
19          label: const Text('Brightness'),
20          description: const Text('Adjust the brightness level.'),
21          marks: const [
22            .mark(value: 0, label: Text('0%')),
23            .mark(value: 0.25, tick: false),
24            .mark(value: 0.5, label: Text('50%')),
25            .mark(value: 0.75, tick: false),
26            .mark(value: 1, label: Text('100%')),
27          ],
28        ),
29        FButton(
30          child: const Text('Save'),
31          onPress: () {
32            if (!_key.currentState!.validate()) {
33              // Handle errors here.
34              return;
35            }
36
37            _key.currentState!.save();
38            // Do something.
39          },
40        ),
41      ],
42    ),
43  );
44}
45

CLI