01 May 2019

This article will take about 2 minutes to read.

This time I want to share a small range slider (progress bar) I built. Check the demo. Code and documentation are available here.

Range slider screenshot

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.


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 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.


I started using this example and added more features. And I would love to mention a few:

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:

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 know what you think and feel free to open an issue or submit a pull request.