How to build a dynamic range slider in flutter?

Question

I want build a dynamic range slider, where i update the values (min, max and divisions) ​​of the range slider by selecting a dropdown button. Are there any examples of this? I have not found any on the Internet. Thanks!

Answer 1

You can use the stock RangeSlider widget and the low and high values as states. You can then change those values in a setState((){}) and the slider will update accordingly.

Here is an example where the FloatingActionButton sets the values to 4 and 6 :

class _MyHomePageState extends State<MyHomePage> {
  static const min = 0.0;
  static const max = 10.0;
  double low = min;
  double high = max;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RangeSlider(
              min: min,
              max: max,
              values: RangeValues(low, high),
              onChanged: (values) => setState((){
                low = values.start;
                high = values.end;
              }),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState((){
          low = 4;
          high = 6;
        }),
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 2

//initialize this line
 RangeValues _currentRangeValues = const RangeValues(10, 1000);     

//use this widget 
RangeSlider(
  values: _currentRangeValues,
  max: 1000,
  activeColor: colorPrimary,
  divisions: 100,
  labels: RangeLabels(
  _currentRangeValues.start.round().toString(),
  _currentRangeValues.end.round().toString()),
  onChanged: (RangeValues values) {
     setState(() {
        _currentRangeValues = values;
     });
  }),

// and dynamically update value use this line 
 setState(() {
   _currentRangeValues = const RangeValues(10, 1000);
 });