Slider

FSlider(
  controller: FContinuousSliderController(
    selection: FSliderSelection(max: 0.6),
  ),
  initialSelection: FSliderSelection(max: 0.6),
);

FSlider(
  label: const Text('Volume'),
  description: const Text('Adjust the volume by dragging the slider.'),
  controller: FContinuousSliderController(selection: FSliderSelection(max: 0.6)),
);

FSlider(
  label: const Text('Volume'),
  description: const Text('Adjust the volume by dragging the slider.'),
  controller: FContinuousSliderController(
    selection: FSliderSelection(max: 0.6),
  ),
  enabled: false,
);

FSlider(
  label: const Text('Volume'),
  description: const Text('Adjust the volume by dragging the slider.'),
  forceErrorText: 'Volume is too high.',
  controller: FContinuousSliderController(selection: FSliderSelection(max: 0.6)),
);

FSlider(
  tooltipBuilder: (style, value) {
    final hex = (value * 100).round().toRadixString(16).padLeft(2, '0');
    return Text('0x$hex');
  },
  controller: FContinuousSliderController(selection: FSliderSelection(max: 0.6)),
);

FSlider(
  controller: FContinuousSliderController(selection: FSliderSelection(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%')),
  ],
);

FSlider(
  controller: FDiscreteSliderController(selection: FSliderSelection(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%')),
  ],
);

FSlider(
  controller: FContinuousSliderController.range(
    selection: FSliderSelection(min: 0.25, max: 0.75),
  ),
);

FSlider(
  controller: FContinuousSliderController(
    selection: FSliderSelection(
      max: 0.6,
      extent: (min: 0.25, max: 0.75),
    ),
  ),
);

FSlider(
  label: const Text('Volume'),
  description: const Text('Adjust the volume by dragging the slider.'),
  layout: FLayout.btt,
  controller: FContinuousSliderController(selection: FSliderSelection(max: 0.35)),
  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%')),
  ],
);

FSlider(
  controller: FContinuousSliderController(
    allowedInteraction: FSliderInteraction.slide,
    selection: FSliderSelection(max: 0.6),
  ),
);

FSlider(
  controller: FContinuousSliderController(
    allowedInteraction: FSliderInteraction.slideThumb,
    selection: FSliderSelection(max: 0.6),
  ),
);

FSlider(
  controller: FContinuousSliderController(
    allowedInteraction: FSliderInteraction.tap,
    selection: FSliderSelection(max: 0.6),
  ),
);

FSlider(
  controller: FContinuousSliderController(
    allowedInteraction: FSliderInteraction.tapAndSlideThumb,
    selection: FSliderSelection(max: 0.6),
  ),
);

class SliderForm extends StatefulWidget {
  const SliderForm({super.key});
 
  @override
  State<SliderForm> createState() => SliderFormState();
}
 
class SliderFormState extends State<SliderForm> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
 
  @override
  Widget build(BuildContext context) => Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            FSlider(
              label: const Text('Brightness'),
              description: const Text('Adjust the brightness level.'),
              controller: FContinuousSliderController(selection: FSliderSelection(max: 0.35)),
              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 (!_formKey.currentState!.validate()) {
                  // Handle errors here.
                  return;
                }
 
                _formKey.currentState!.save();
                // Do something.
              },
            ),
          ],
        ),
      );
}