How to create a age range slider in flutter?

Question

Would anyone know how to create an age range slider in flutter? A slider which will have two input values. Somewhat like what Tinder has to choose min and max age. a slider

Answer 1

As I also needed this widget for one of my developments, I decided to develop it.

Here is the outcome

Source code my be found on GitHub

Full explanation on this link

Answer 2

Thanks to boeledi This is a nice library for you.

RangeSlider(
      min: minPrice,
      max: maxPrice,
      lowerValue: _lowerValue,
      upperValue: _upperValue,
      divisions: 50,
      showValueIndicator: true,
      valueIndicatorMaxDecimals: 4,
      onChanged: (double newLowerValue, double newUpperValue) {
        setState(() {
          _lowerValue = newLowerValue;
          _upperValue = newUpperValue;
        });
      },
      onChangeStart: (double startLowerValue, double startUpperValue) {
        print('Started with values: $startLowerValue and $startUpperValue');
      },
      onChangeEnd: (double newLowerValue, double newUpperValue) {
        print('Ended with values: $newLowerValue and $newUpperValue');
      },
    )

Put it in your widget tree.

min is minimum value. max is maximum value that you want. Give lowerValue and upperValue initial global value, So when range changes this values will change too. divisions = n divide amount between lowerValue and upperValue to n section. You have new values in onChanged method. Good luck.

Answer 3

What you are looking for is the Slider widget. I think a discrete slider would work best for what you are trying to achieve.

You should take a look at the Flutter Gallery App which has examples of many widgets along with source code which can be found on their GitHub repo.

Looking at their code from their Slider Demo, I have found this example which may suit your need:

new Slider(
                  value: _discreteValue,
                  min: 0.0,
                  max: 100.0,
                  divisions: 5,
                  label: '${_discreteValue.round()}',
                  onChanged: (double value) {
                    setState(() {
                      _discreteValue = value;
                    });
                  },
                ),
                const Text('Discrete'),
              ],
            )

Of course you will need to adjust this code to better suit your needs, but hopefully it gets you started in the right direction.

Let me know if you have any questions!

Answer 4

// You can try this one.

  double minPrice = 0;
  double maxPrice = 100;
  double _lowerValue = 0;
  double _upperValue = 100;

.......

SliderTheme(
                        data: SliderTheme.of(context).copyWith(
                          activeTrackColor: kCustomRed,
                          inactiveTrackColor: Color(0xFFE6EAEE),
                          thumbColor: kCustomRed,
                          thumbShape:
                              RoundSliderThumbShape(enabledThumbRadius: 6),
                        ),
                        child: rg.RangeSlider(
                          min: minPrice,
                          max: maxPrice,
                          lowerValue: _lowerValue,
                          upperValue: _upperValue,
                          divisions: 50,
                          showValueIndicator: true,
                          onChanged:
                              (double newLowerValue, double newUpperValue) {
                            setState(() {
                              _lowerValue = newLowerValue;
                              _upperValue = newUpperValue;
                            });
                          },
                        ),
                      ),

Answer 5

Flutter Version 1.20.0

We having an update for RangeSlider with the label.

  class RangeWidget extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => _RangeWidget();
  }
  
  class _RangeWidget extends State<RangeWidget> {
    RangeValues _currentRangeValues = const RangeValues(0, 100);
  
    static String _valueToString(double value) {
      return value.toStringAsFixed(0);
    }
  
    @override
    Widget build(BuildContext context) {
      return new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          RangeSlider(
            values: _currentRangeValues,
            min: 0,
            max: 100,
            divisions: 10,
            labels: RangeLabels(
              _currentRangeValues.start.round().toString(),
              _currentRangeValues.end.round().toString(),
            ),
            onChanged: (RangeValues values) {
              setState(() {
                _currentRangeValues = values;
              });
            },
          )
        ],
      );
    }
  }