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:
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:
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 (8)
Do you have a demo with rotating input sliders? Would be cool to see how it works, some simple reproduction worked on my side
Like these?
browser.style/ui/range-circular/
browser.style/ui/range-arc/
Wow, I didn't know about existence of browser.style. Looks cool. Is it in github?
My idea was rotating input type=range in circular fashion, so that it matches the tangent of the direction, which would handle drag event.
browser.style is my personal playground! I tried at one time to style a range like you mention, but didn’t succeed.
Awesome Stuff, something i have been looking for a while, Thank you.👍
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.
Thank you! I might look into a dual slider, if I get some time!