How to have a slider in flutter with specific divisions

217

I think the following snippet is what you are looking for:

final List<double> values = [0.5, 1.0, 2.0, 3.0, 4.0, 5.0, 10.0, 15.0];
int selectedIndex = 0;

Slider(
   value: selectedIndex.toDouble(),
   min: 0,
   max: values.length - 1,
   divisions: values.length - 1,
   label: values[selectedIndex].toString(),
   onChanged: (double value) {
   setState(() {
        selectedIndex = value.toInt();
      });
   },
),

This is the result:

iPhone simulator screen recording

Share:
217
George Davis-Diver
Author by

George Davis-Diver

Updated on January 03, 2023

Comments

  • George Davis-Diver
    George Davis-Diver over 1 year

    I want to have a slider in flutter with numbers like .5,1,2,3,4,5,10,15. How is this possible. I know that the divisions creates divisions in the slider that are linear. Is this possible to have my own numbers as each dot instead of a linear slider?

    Slider(
      value: seconds,
      max: 3600,
      divisions:
          120, // this is where i want to have a not a linear division
      label: (seconds / 60.0).toStringAsFixed(1),
      onChanged: (double value) {
        setState(() {
          seconds = value;
        });
      },
    ),