Accessibility in Flutter Range Selector (SfRangeSelector)

19 Oct 20223 minutes to read

Screen reader

The SfRangeSelector 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 the thumb 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 the thumb and then swiping up or down to increase or decrease the value respectively.

SfRangeValues _values = SfRangeValues(40.0, 60.0);

@override
Widget build(BuildContext context) {
   return MaterialApp(
      home: Scaffold(
          body: Center(
            child: SfRangeSelector(
              min: 0.0,
              max: 100.0,
              initialValues: _values,
              interval: 20,
              showTicks: true,
              showLabels: true,
              semanticFormatterCallback: (dynamic value, SfThumb thumb){
                return 'The $thumb value is $value';
              },
              onChanged: (SfRangeValues newValues) {
                setState(() {
                  _values = newValues;
                });
              },
              child: Container(
                height: 200,
                color: Colors.pink[200],
              ),
            ),
          )
      ),
   );
}

Sufficient contrast

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

Large fonts

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

Easier touch targets

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