Accessibility in Flutter Slider (SfSlider)

19 Oct 20224 minutes to read

Screen reader

The SfSlider can be accessed by screen readers. By default, it will read the current value. You can change the reading format using the semanticFormatterCallback property.

For android, you can adjust the value of 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 thumb by moving the focus to it and then swiping up or down to increase or decrease the value respectively.

Horizontal

double _value = 40.0;

@override
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
            child: SfSlider(
              min: 0.0,
              max: 100.0,
              value: _value,
              interval: 20,
              showTicks: true,
              showLabels: true,
              semanticFormatterCallback: (dynamic value){
                return 'The selected value is $value';
              },
              onChanged: (dynamic newValue) {
                setState(() {
                  _value = newValue;
                });
              },
            ),
          )
      ),
   );
}

Vertical

double _value = 40.0;

@override
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
            child: SfSlider.vertical(
              min: 0.0,
              max: 100.0,
              value: _value,
              interval: 20,
              showTicks: true,
              showLabels: true,
              semanticFormatterCallback: (dynamic value){
                return 'The selected value is $value';
              },
              onChanged: (dynamic newValue) {
                setState(() {
                  _value = newValue;
                });
              },
            ),
          )
      ),
   );
}

Sufficient contrast

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

Large fonts

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

Easier touch targets

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