Accessibility in Flutter Range Slider (SfRangeSlider)

18 May 20215 minutes to read

Screen reader

The SfRangeSlider can be accessed by screen readers. The default reading format for start thumb is The start value is ${values.start} and end thumb is the end value is ${values.end}. You can change the reading format using the semanticFormatterCallback property.

For android, you can adjust the value of each thumb by moving the focus to it and then pressing the volume buttons to increase or decrease the value.

For iOS, you can adjust the value of each thumb by moving the focus to it and then swiping up or down to increase or decrease the value respectively.

Horizontal

SfRangeValues _values = SfRangeValues(40.0, 60.0);

@override
Widget build(BuildContext context) {
   return MaterialApp(
      home: Scaffold(
          body: Center(
            child: SfRangeSlider(
              min: 0.0,
              max: 100.0,
              values: _values,
              interval: 20,
              showTicks: true,
              showLabels: true,
              semanticFormatterCallback: (dynamic value, SfThumb thumb){
                return 'The $thumb value is $value';
              },
              onChanged: (SfRangeValues newValues) {
                setState(() {
                  _values = newValues;
                });
              },
            ),
          )
      ),
   );
}

Vertical

SfRangeValues _values = SfRangeValues(40.0, 60.0);

@override
Widget build(BuildContext context) {
   return MaterialApp(
      home: Scaffold(
          body: Center(
            child: SfRangeSlider.vertical(
              min: 0.0,
              max: 100.0,
              values: _values,
              interval: 20,
              showTicks: true,
              showLabels: true,
              semanticFormatterCallback: (dynamic value, SfThumb thumb){
                return 'The $thumb value is $value';
              },
              onChanged: (SfRangeValues newValues) {
                setState(() {
                  _values = newValues;
                });
              },
            ),
          )
      ),
   );
}

Sufficient contrast

You can customize the color of the SfRangeSlider elements using the following APIs for the sufficient contrast.

Large fonts

The font size of the SfRangeSlider will be automatically scaled based on the device settings. Also, you can change the font size of the SfRangeSlider elements using the following APIs:

Easily touch targets

The SfRangeSlider has touch target as 48 * 48 as per the standard for all the elements.