Accessibility in Flutter Range Slider (SfRangeSlider)

18 Jun 20255 minutes to read

Keyboard support

This feature allows you to focus on the SfRangeSlider 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 SfRangeSlider, 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 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.