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!

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