CSS Range Slider Styler
Generate cross-browser-ish range slider track and thumb styles.
Style range sliders cross-browser
Native range inputs look wildly different across browsers and rarely match a design. Styling the track and thumb consistently means writing several vendor-prefixed rules. This styler generates that CSS from simple controls so your sliders look intentional everywhere.
Getting the -webkit- and -moz- pseudo-elements right by hand is tedious and easy to forget. Tune the track and thumb, copy the generated CSS, and pair it with a real range input to keep the control accessible.
Copy-ready range CSS
Styling a range input means targeting its track and thumb with prefixed pseudo-elements per browser, which the output handles. Built in your browser.
Frequently asked questions
Why don't the track and thumb styles show in Chrome or Safari?
The ::-webkit-slider rules only apply after the native look is removed. Add -webkit-appearance: none and appearance: none to the input and -webkit-appearance: none to the thumb, then set margin-top on the thumb to center it on the track.
What about Firefox?
Firefox uses ::-moz-range-track and ::-moz-range-thumb instead. Copy the track and thumb rules into those selectors to match the look.
Is accent-color alone enough?
For a quick brand match, yes. accent-color recolors the native slider in all current major browsers without losing its built-in accessibility, and it is what the preview shows.
Related tools
Practical utilities for front-end design and implementation work.