How to make a custom range slider in flutter with non uniform discrete divisions?

Question

i want to make a range slider in flutter which has variable discrete divisions. For example in normal slider divisions are like- 0-10,10-20,20-30,30-40 ......100.Here 1/10 length is given to each division. But i want to make a range slider in which divisions are like 0-10,10-50,50-100. so 1/3 length given to all these 3 divisions.

normal slider- this slider shows all number between 1-100.change in value per division is constant.

0 10 20 30 40 50 60 70 80 90 100
|  |  |  |  |  |  |  |  |  |  |

what i want to make- this slider also shows all numbers between 1-100. but slider will go slowly from 0-10, then faster from 10-50, then more faster from 50-100.

0       10        50         100
|  |  |  |  |  |  |  |  |  |  |

Actually in my project i want to make a slider such that the we can choose easily the numbers from 0-1000(100 per divisions), then after that the speed increases from 1000 - 100000(1000 per divisions) and then 100000-1000000(100k per divisions). these 3 in one range slider. This is the best way i can explain the problem.

https://api.flutter.dev/flutter/material/SliderTickMarkShape-class.html - the docs say: *"Base class for Slider tick mark shapes. Create a subclass of this if you would like a custom slider tick mark shape."* — pskink, Dec 01 '20 at 08:48
@pskink i dont want to create a custom slider tick mark or tooltip, please read the question properly. — Artisted, Dec 01 '20 at 09:33
ok, but how can i create custom tick marks, and the doc u mentioned is about customtickmark shape. — Artisted, Dec 02 '20 at 15:44
@Artisted,, did you find the solution,,, I'm facing the same issue and can't find a solution — Rageh Azzazy, May 22 '21 at 17:17
i used flutter_xlider package https://pub.dev/packages/flutter_xlider — Artisted, May 28 '21 at 07:18
and then i made a function, which will convert linear values(0-100) according to the client's need, the slider will hv 100 normal break points, but it will show different values — Artisted, May 28 '21 at 07:21
String convert(double value) { String result = value.toInt().toString(); double temp; if (value <= 50) { temp = value * 1000.0; result = convert(temp); } else if (value > 50 && value <= 60) { temp = ((value - 50) * 5000) + 50000; result = convert(temp); } else { temp = ((value - 60) * 25000) + 100000; result = convert(temp); } return result; } — Artisted, May 28 '21 at 07:22
here value ranges from 0 to 100 linearly, so u can create a function of this type according to ur need. and u can use this function to show the converted value in a text widget — Artisted, May 28 '21 at 07:25

score 0 · Answer 1 · answered Nov 17 '22 at 15:58

More of a workaround, but this should work.

final mapper = {0:0, 1:5, 2:10, 3:50};

...

Slider(
  min: 0.0,
  max: 3.0,
  divisions: 3,
  value: _value,
  divisions: 10,
  label: '${mapper[_value]}',
  onChanged: (value) {
    setState(() {
      _value = value;
      returnValue = mapper[_value]
    });
  },
)

How to make a custom range slider in flutter with non uniform discrete divisions?

1 Answers1