flutterdynamicrangeslider

How to build a dynamic range slider in flutter?


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!


Solution

  • 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),
          ),
        );
      }
    }