Free Online CSS Range Slider Generator for input type range
Style a real range input and drag it as you work. Track height, radius and colour, thumb size, shape, colour, border and shadow, thumb growth on hover and while dragging, a filled portion before the thumb, and a focus ring. The vendor rules are written separately, which is what makes them work.
Both sliders are real inputs. Drag them, hover the thumb, and press Tab then the arrow keys to check the focus ring.
Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.
How to Style a Range Input with CSS
A few steps, and nothing is uploaded.
What to Know About Styling Range Inputs
Including the one mistake that makes a styled range silently fail.
::-webkit-slider-runnable-track and ::-webkit-slider-thumb, Firefox exposes ::-moz-range-track and ::-moz-range-thumb, and neither engine understands the other set. CSS discards an entire rule if any selector in its list is invalid, so writing ::-webkit-slider-thumb, ::-moz-range-thumb together means Chrome throws the rule away because of the Moz selector and Firefox throws it away because of the WebKit one. The result is a slider that looks completely unstyled with no error anywhere, and this is the single most common reason a styled range silently fails. Every rule the output writes is on its own, duplicated declarations and all.
::-moz-range-progress, which is sized for you, so the fill is one rule with a background colour. WebKit has no equivalent at all, so the fill has to be painted on the track itself as a hard stop gradient at the current percentage, which means something has to tell CSS what that percentage is. The output uses a custom property on the element and includes the one line of JavaScript that keeps it in step on input. Without that line the WebKit fill simply stays where it started.
appearance: none is set, and in WebKit the thumb pseudo-element needs its own -webkit-appearance: none as well, or the size and colour are ignored. The thumb also has to be centred on the track by hand in WebKit with a negative margin-top of half the difference between the thumb and the track height, because the track is a real box there while Firefox centres the thumb itself.
Key Features & Capabilities
What this tool does, and what it deliberately does not.
About the CSS Range Slider Generator
A range input is the hardest of the common form controls to style, because almost none of it is an ordinary box. The track and the thumb are internal parts that each engine exposes through its own pseudo-elements, with different names, different boxes and different behaviour, and there is still no standard set that works everywhere. Getting a slider to look designed means writing the same declarations two or three times over.
This page writes them for you and, more usefully, writes them apart. Grouping the WebKit and Moz selectors into one rule looks tidier and is the reason so many styled sliders quietly revert to the browser default: an unrecognised selector in a list invalidates the whole rule, so each engine discards the block because of the half belonging to the other engine. The output repeats itself on purpose.
The filled portion is the other awkward part. Firefox gives you a pseudo-element that is already the right width, while WebKit gives you nothing and has to be faked with a two stop gradient on the track, which needs the current percentage as a custom property. The tool generates both, along with the single input handler that keeps the property in step, and both preview sliders run that handler so you can see the fill move as you drag.
Frequently Asked Questions
Vendor pseudo-elements, the filled portion, focus and touch.
appearance: none.::-moz-range-progress with a background colour and the browser sizes it. In WebKit there is no such pseudo-element, so put a linear-gradient on the track with two stops at the same position, both at the current percentage, and update that percentage from an input handler through a custom property. The output generates both routes and includes the handler.::-webkit-slider-runnable-track is a real box with a height, and the thumb sits on top of it rather than being centred in it. Give the thumb a negative margin-top of half the difference between the thumb size and the track height. Firefox does not need this, which is why the value is only in the WebKit rule. The tool calculates it from the sizes you set.box-shadow ring on the thumb under :focus-visible, which reads as a focus indicator and follows the thumb as it moves. Do not simply set outline: none and stop there: a slider with no visible focus state is unusable for anyone who is tabbing through a form.