OneTaskBy Tim King · Updated
Range Slider Generator
Filled Track, Thumb Size and Live Value for a Native Range Input
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Range Slider Builder works
This range slider generator writes the CSS for a custom input. A native range input works everywhere but looks different in every browser. This builder styles the track and thumb so it matches your design, fills the track up to the current value and shows the number beside the label. Drag the slider in the preview, then copy the HTML, CSS and script.
How the range slider generator works
The slider is still <input type="range">. Keyboard support, touch handling, form submission and
screen reader announcements all come from the browser; the CSS only changes how it is drawn.
Removing the default look. appearance: none on the input switches off the platform
rendering and makes the pseudo-elements stylable. The input itself is made transparent and as
tall as the thumb, so there is a comfortable hit area even when the track is a thin line.
Track and thumb pseudo-elements. Chrome, Safari and Edge use
::-webkit-slider-runnable-track and ::-webkit-slider-thumb. Firefox uses
::-moz-range-track, ::-moz-range-thumb and additionally ::-moz-range-progress for the
filled portion. The two vendor blocks must stay in separate rules: if a browser does not
recognise one selector in a comma list it drops the whole rule.
Painting the fill. Firefox has a real progress pseudo-element, but WebKit browsers do not.
The generated CSS uses a two-stop linear-gradient on the track, with the stop position held in
a custom property --pct. The script computes the value's position as a percentage of the range
on each input event and writes it to that property. That is the only thing the script does;
if you drop it the slider still works, just without the fill.
Centring the thumb. In WebKit the thumb is positioned relative to the track's top edge, so a
negative margin-top of half the difference between thumb and track height keeps it centred.
Firefox centres automatically and ignores the margin. Firefox also draws the border outside the
declared thumb size, so the generated Firefox rule subtracts the border width to keep both
browsers the same size.
The value readout. An <output> element with for="amount" is the semantic way to show a
control's current value. It is updated by the same script and uses tabular numerals so the label
does not shift as digits change.
Focus. Because appearance: none also removes the focus ring in some browsers, the CSS adds
an explicit :focus-visible outline around the whole input so keyboard users can see it.
FAQ
Why does the filled part not show in Safari without JavaScript?
WebKit has no progress pseudo-element, so the fill is a gradient positioned by a custom property that only script can update as the value changes. The initial value is baked into the CSS, so the slider renders correctly before the script runs and simply stops updating if it fails.
Can I add tick marks or labels along the track?
Use a <datalist> with <option> values and point the input's list attribute at it. Chrome
draws small ticks; Firefox and Safari draw nothing visible, so for guaranteed marks add a row of
spans under the slider and space them with flexbox.
How do I show the value in a bubble above the thumb?
Position the output absolutely over the track and set its left to the same percentage the fill
uses, offset by half the thumb width. The --pct property already holds that percentage, so
left: calc(var(--pct) - 10px) on the output does most of the work.
Does this work with vertical sliders?
Chrome and Firefox support writing-mode: vertical-lr on range inputs, and Safari needs
appearance: slider-vertical. Swap width and height in the track rules. For older browsers a
rotate(-90deg) transform on the horizontal slider is the fallback.
What about two thumbs for a min and max?
That needs two range inputs overlaid on one track, with script that stops them crossing and paints the fill between them rather than from the left edge. The Dual Range Slider builder generates exactly that.
See also: all Forms & Inputs tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Colour.
Related tools
Form Progress Bar
Step indicators and progress bars for multi-step forms and checkouts.
Dual Range Slider
Two-thumb min/max slider for price filters, no library needed.
Custom Radio Button Builder
Accessible custom radio buttons as dots, cards or pill segments.
Floating Label Form
Material-style floating labels in pure CSS with outlined, filled and underline variants.
Input Mask Generator
Auto-formatting inputs for phone, date, card and custom patterns.