Style a range input's track and thumb across browsers, with a live filled-progress effect. Drag the preview, then copy the code.
Drag the handle in the preview and watch the fill and thumb update live, exactly like the code you're about to copy.
Generates matching webkit and moz thumb rules so it looks right everywhere.
A JS input listener keeps the gradient fill in sync as you drag.
Get the HTML, CSS and the small JS snippet needed to keep it working.
The native <input type="range"> is one of the most useful and least consistently stylable HTML controls: every browser hides its actual track and thumb behind vendor-prefixed pseudo-elements instead of a shared standard, so a slider that looks polished in Chrome can look completely unstyled in Firefox unless both are targeted explicitly. The other half of the puzzle is the "filled" look popular in modern UIs, where the portion of the track behind the handle is a different color from the portion ahead of it. Browsers don't expose that boundary directly, so it's recreated with a linear-gradient background on the input itself, split at the current percentage and recalculated on every drag.
Chrome, Edge and Safari use ::-webkit-slider-runnable-track and ::-webkit-slider-thumb, and thumbs need a manual vertical offset to center on the track.
Firefox uses ::-moz-range-track and ::-moz-range-thumb instead, and centers the thumb on the track automatically.
Setting the track background to transparent lets a linear-gradient on the input itself show through as the "filled" portion.
Because it's still a real range input, keyboard arrows, Page Up/Down and screen readers all work without extra ARIA.
Range inputs are one of the few HTML controls without a shared styling API. Chrome, Edge and Safari use the -webkit-slider-runnable-track and -webkit-slider-thumb pseudo-elements, while Firefox uses -moz-range-track and -moz-range-thumb, so both rule sets are needed for consistent results.
The track pseudo-elements are set to a transparent background, and a linear-gradient is applied directly to the input element itself, recalculated on every input event so the filled portion always matches the current value.
Yes. Choose a circle, square or pill-shaped thumb, and the generated webkit and moz thumb rules update to match, including a vertical centering fix for Chrome-based browsers.
Yes. Because the output is a real input[type=range] element, arrow keys, Page Up/Down, Home and End all work natively without any extra JavaScript.
Yes. It is completely free, requires no account, and builds all HTML, CSS and JS locally in your browser.
Keep building interface components with these free online tools.