Flutter RangeLabels on RangeSlider not working

Question

I'm trying to get the basic RangeSlider working with the labels showing the start end ranges of the labels. Below is the most simplified you can make it...a container that contains the slider. For whatever reason, the labels do not appear? I've looked at other samples, and this should be trivial, but can't figure out why it's not showing the labels? Could this be a bug?

  class _TestScreenState extends State<TestScreen> {
 RangeValues _values = RangeValues(15, 30);

   @override
 Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(
    title: Text('Testing formatting'),
  ),
  body: Container(
    child:  RangeSlider(
          values: _values,
          min:1,
          max: 60,
          labels: RangeLabels('${_values.start.round()}', '${_values.end.round()}'),
          onChanged: (RangeValues values) {
            setState(() {
              _values = values;
            });
          },
        ),
  ),
  drawer: SideDrawer(),
);

}

Update: Figured it out, not sure if it's by default, but I needed to specify a SliderTheme, and then within the sliderTheme, provide SlideThemeData and set the showvalueindicator to showvalueIndactor.always. Then it started to appear.

score 5 · Answer 1 · answered May 21 '20 at 06:19

Here's how you can achieve the same

SliderTheme(
    data: SliderThemeData(
      showValueIndicator: ShowValueIndicator.always
    ),
    child: RangeSlider(
      values: _values,
      min: 0,
      max: 1000,
      labels: RangeLabels('${_values.start.round()}', '${_values.end.round()}'),
      inactiveColor: Colors.grey,
      activeColor: Colors.black,
      onChanged: (RangeValues values) {
        setState(() {
          _values = values;
        });
      },
    ),
);

Here _values are the RangeValues defined in State class like this

     class _FilterScreenState extends State<FilterScreen>{
      RangeValues _values = RangeValues(100, 900);
}

score 1 · Answer 2 · answered Nov 13 '22 at 13:57

You need to set divisions for it

              RangeSlider(
                values: RangeValues(start, end),
                max: maxAge.toDouble(),
                min: minAge.toDouble(),
                activeColor: Cl.red,
                inactiveColor: Cl.gray_4,
                divisions: maxAge - minAge,
                labels: const RangeLabels('Age Start', 'Age End'),
                onChanged: onRangeChanged,
              ),

Flutter RangeLabels on RangeSlider not working

2 Answers2