DEV Community

Cover image for Accessible Circular Sliders
Mads Stoumann
Mads Stoumann

Posted on • Updated on

Accessible Circular Sliders

Just a few years ago, it was almost impossible to create range sliders without a lot of JavaScript. Thankfully, in modern browsers, it's super-easy to style range sliders, using CSS only. If the browser supports CSS Custom Properties, it's even possible to use the same styles for a wide range of different styles, just by updating a few properties.

I created these sliders recently, using only CSS:

Range Sliders

JavaScript is only used to set the value of the slider as a custom property, that then is used in a CSS linear-gradient to create the "fill".

Accessibility is "built-in": you can :focus, and use arrow-keys for navigation.

But what about Circular Sliders?

I've always had a soft spot for circular sliders — don't know why, really. So I tried to style the <input type="range" /> as a circle, and the thumb-shadow-element as a draggable, smaller circle.

Visually, it was possible using only CSS:

Circular Range

But the movement of the thumb-circle was still horizontal.
I then tried to update a custom property with the value of the <input>, and used that in a transform, rotating the track of the <input> and a negative margin-left to position the thumb.

But, alas, although it was possible to move the thumb along the edges of the circle using arrow-keys, it didn't really work using pointer-devices.

So in the end, I had to call my father, a retired maths teacher, to brush up my trigonometry and understanding of arctangents, in order to create these accessible, circular sliders:

They are :focus'able, and use the same arrow-keys as regular range-sliders. The fill is a CSS conic-gradient.

Thanks for reading!

Top comments (3)

ghnetcode profile image

Awesome Stuff, something i have been looking for a while, Thank you.👍

zhangj1an profile image
Zhang Jian

Hi thanks a lot for this amazing slider!
Is it possible to have a circular "dual" slider? That is, have an interval input rather than a single value.

madsstoumann profile image
Mads Stoumann

Thank you! I might look into a dual slider, if I get some time!