# Accessible range slider

DevFeed: [Accessible range slider](<https://devfeed.tech/articles/accessible-range-slider-37233.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/accessible-range-slider/>)

Author: Stanko

Published: 2019-05-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Code](<https://devfeed.tech/topics/code.md>), [Library](<https://devfeed.tech/topics/library.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessible](<https://devfeed.tech/tags/accessible.md>), [aria](<https://devfeed.tech/tags/aria.md>), [callback](<https://devfeed.tech/tags/callback.md>), [code](<https://devfeed.tech/tags/code.md>), [demo](<https://devfeed.tech/tags/demo.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [features](<https://devfeed.tech/tags/features.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [library](<https://devfeed.tech/tags/library.md>), [react](<https://devfeed.tech/tags/react.md>)

## AI overview

The article describes a small range slider built for a React project after existing options lacked a combination of touch support, accessibility, callbacks, and easy styling. It presents the slider as an accessibility-first JavaScript library with ARIA and keyboard support, touch-friendly interaction, tooltips, a user-controlled buffer bar, callbacks, and styling options. A React wrapper was planned, and the code was released under the MIT license.

## Source excerpt

This time I want to share a small range slider (progress bar) I built. Check the demo. Code and documentation are available here. Same story again, on a React project we needed a media progress bar, and I ended up writing one myself. Why I didn't like anything I found? Well, everything I tried was missing one of the things we considered mandatory - good touch support, accessibility (aria attributes, keyboard control), callbacks or easy styling. On this specific project we went with Material-UI's slider, but it is still in their beta (lab) phase and it has couple of glitches. Soon we are going to replace it with the one I built. Accessibility # This range slider is the first library I wrote with accessibility-first mindset. That is something that I want to pursue and promote more. If you start with basic accessibility and build features around it, it will be much easier than just adding accessibility stuff when library is complete.Similar like it goes with tests. I do it myself, too - I get excited about the problem, start hacking, and couple of hours later I have a decent codebase and zero tests. Features # I started using this example and added more features. And I would love to mention a few: Fully accessible (aria attributes and keyboard control) Great touch support, actual hitbox area is bigger than track and handle Two tooltips, one for the current value, and the other shown on hover which shows the value that will be set on click Additional "buffer bar" that is controlled by the user (great for media players) Callback system Easy to style (I plan to add more themes) At the moment, only plain JavaScript version is available, but I plan to add a React wrapper. And while we are talking about accessible React libraries, you should check David Clark's work: react-aria-modal react-aria-menubutton react-aria-tabpanel He has a bunch of other great libraries, be sure to check them out. As usual it is released under MIT license and code is available on GitHub. Let me kn