Accessibility in Flutter Range Selector (SfRangeSelector)

18 Jun 20253 minutes to read

Keyboard support

This feature allows you to focus on the SfRangeSelector widget using the TAB key and adjust its values with the keyboard arrow keys. By default, the start thumb receives focus first. The left and down arrow keys can be used to decrease the value of the focused thumb, while the right and up arrow keys can be used to increase it.

NOTE

In SfRangeSelector, keyboard accessibility is not supported when dragMode is set to SliderDragMode.betweenThumbs, as focus can only be applied to one thumb at a time.

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.