accessible_range_slider 1.0.2

A RangeSlider variation that support keyboard interactivity for accessibility usages.

Getting started

First import the widget

import 'package:accessible_range_slider/accessible_range_slider.dart';

copied to clipboard

Features

When implementing accessibility, enabling keyboard navigation for interactive elements is crucial.

However, due to a current limitation in the implementation, the framework does not support interacting with a RangeSlider using the keyboard or receiving focus.

The root of the problem lies in the makeshift implementation of accessibility, currently using LeafRenderObjectWidget and creating a custom semantic boundary to support screen readers.

This poses a challenge since the slider's thumbs cannot properly receive focus because there are no child widgets to receive focus.

To address this limitation, this package rewrites the internal implementation of RangeSlider to use SlottedMultiChildRenderObjectWidget. By splitting each thumb into its own node, the slider can now handle focus, screen reader actions, and keyboard interactions effectively.

Usage

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  RangeValues _values = const RangeValues(0, 1);

  void _rangeValuesChanged(RangeValues values) {
    setState(() {
      _values = values;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: AccessibleRangeSlider(
          values: _values,
          onChanged: _rangeValuesChanged,
        ),
      ),
    );
  }
}

copied to clipboard

Just replace the original RangeSlider with AccessibleRangeSlider and you're good to go