Micro Tools
Advertisement

Range slider styler

Style the native range input: track height, thumb size and colors for both. Drag the live slider to test it, then copy the webkit and Firefox CSS.

Slider style

Drag the preview slider to feel the thumb size.

Preview and CSS
55
Advertisement

How the fill trick works

Range inputs have no native fill-before-thumb styling, so the trick is a linear-gradient background that is fill-colored up to the current percentage and track-colored after. JavaScript updates the percentage on every input event, which is why the fill follows the thumb live.

Styling both rendering engines

Webkit browsers need ::-webkit-slider-thumb with -webkit-appearance: none to kill the native look, plus a negative margin to center the thumb on the track. Firefox uses ::-moz-range-thumb and centers automatically. This tool emits both.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Range Slider Styler FAQs

Why is my thumb not vertically centered in Chrome?
Webkit positions the thumb at the top of the track by default. Add margin-top equal to half the track height minus half the thumb height. This tool computes that offset for you automatically.
How big should a slider thumb be on mobile?
At least 24 to 28px so thumbs can grab it. The track can stay slim at 6 to 8px; a big thumb on a slim track is the modern look and stays tappable.
Can I show tick marks on the slider?
Yes, add a datalist with option values and the list attribute on the input. Browsers render ticks in most cases, though styling them is limited, so many designers draw custom ticks with a background gradient instead.
Why does the fill not update in my copied code?
The copied CSS sets the gradient at the value it had when you copied. You need the small JavaScript snippet that rewrites the background percentage on input. Without it the fill freezes at the initial position.
Is appearance: none safe for accessibility?
Yes, as long as you keep it a real input element. Screen readers still announce it as a slider with its value. Keep visible focus styles so keyboard users can see when it is focused.
Advertisement