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 that has two input fieldss

"Somewhat like what Tinder has to choose min and max age" is quite vague. Not everyone uses Tinder. I guess you need to build your own. You can copy the source from the `Slider` class and add a 2nd thumb. — Günter Zöchbauer, May 23 '18 at 14:24

score 13 · Answer 1 · answered Jul 29 '18 at 03:21

13

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

answered Jul 29 '18 at 03:21

boeledi

6,837
10
32
42

Can you make a migration to null-safety? – Burak Sep 14 '21 at 19:42

score 3 · Answer 2 · answered May 24 '18 at 05:20

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!

How would I add a double thumb input , having a hard time trying to figure that out. — russsell phillips, May 25 '18 at 05:28

score 3 · Answer 3 · answered Aug 02 '19 at 00:56

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.

score 2 · Answer 4 · answered Aug 06 '20 at 05:24

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

score 1 · Answer 5 · answered Oct 31 '19 at 01:08

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

Welcome to StackOverflow! Please edit your answer to include a description/explanation of your code. This will make your answer more useful and more likely to be upvoted :) — Das_Geek, Oct 31 '19 at 01:19

HoRiz · Answer 6 · 2023-02-12T14:13:42.570

(You can also use syncfusion_flutter_sliders package)

Here's an example create age range getter using Flutter RangeSlider widget:

OUTPUT :

Create variables for Lower age and Higher age

int _lowerValue = 18;
int _upperValue = 69;

Now create the body:

below code is on the body property of Scaffold

used values.start.round() to get round numbers (if not use it, double value also include.) age must be a round number

  Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("Lower value: $_lowerValue"),
        Text("Upper value: $_upperValue"),
        Container(
          height: 80,
          width: 300,
          child: RangeSlider(
            min: 18,
            max: 69,
            divisions: 51,
            values:
                RangeValues(_lowerValue.toDouble(), _upperValue.toDouble()),
            onChanged: (RangeValues values) {
              setState(() {
                _lowerValue = values.start.round();
                _upperValue = values.end.round();
              });
            },
          ),
        ),
      ],
    ),
  ),

How to create a age range slider in flutter?

6 Answers6