Accessibility in Flutter Slider (SfSlider)

6 Aug 20265 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. The value changes by stepSize (for numeric values) or stepDuration (for date values) per key press.

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

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const 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

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const 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:

Touch targets

The SfRangeSlider provides touch targets of 48 × 48 pixels for all interactive elements.