1 Tailwind5 with JSPublished 2026-10-05Free · no sign-up
Six sliders that keep the native range input underneath: a quick accent-colour slider, a fully custom thumb, a filled track, a stepped control with labels, a minimum and maximum price range and a thermostat with step buttons.
The quickest styled slider: the accent- utility recolours the browser's own range input, keeping its native look, keyboard support and touch target. An output element shows the current value next to the label.
var r = document.getElementById('twrs1'), o = document.getElementById('twrs1o');
r.oninput = function () { o.textContent = r.value + '%'; };
02. Tailwind Custom Thumb Slider
TailwindRangePseudo-elements
A fully custom slider styled with arbitrary variants that target the thumb pseudo-elements: [&::-webkit-slider-thumb] for Chrome and Safari and [&::-moz-range-thumb] for Firefox. The thumb gets a glowing halo and the outline shows on keyboard focus.
The part of the track before the thumb fills with colour. A custom property holds the percentage and an arbitrary background utility draws a hard-stop gradient from it, so the fill works the same in every browser.
var r = document.getElementById('twrs3'), o = document.getElementById('twrs3o');
function u() { r.style.setProperty('--p', (r.value - r.min) / (r.max - r.min) * 100 + '%'); o.textContent = '$' + Number(r.value).toLocaleString('en-US'); }
r.oninput = u; u();
04. Tailwind Stepped Slider with Labels
TailwindRangeSteps
A five-step text size control with labels under the track and a live preview. aria-valuetext gives screen readers a word such as Medium instead of the raw number, and the labels underneath are hidden from them to avoid repetition.
var r = document.getElementById('twrs4'), p = document.getElementById('twrs4p'), n = ['Extra small', 'Small', 'Medium', 'Large', 'Extra large'], s = [12, 14, 16, 19, 22];
r.oninput = function () { r.setAttribute('aria-valuetext', n[r.value]); p.style.fontSize = s[r.value] + 'px'; };
05. Tailwind Dual-Handle Price Range
TailwindRangeDual
A minimum and maximum price picker made of two native range inputs laid on top of each other. The inputs ignore the pointer except on their thumbs, a script keeps the two handles from crossing, and each one has its own accessible name.
var a = document.getElementById('twrs5a'), b = document.getElementById('twrs5b'), f = document.getElementById('twrs5f'), o = document.getElementById('twrs5o');
function u(e) { if (+a.value > +b.value - 10) { if (e && e.target === a) a.value = b.value - 10; else b.value = +a.value + 10; } f.style.left = a.value / 5 + '%'; f.style.right = 100 - b.value / 5 + '%'; o.textContent = '$' + a.value + ' – $' + b.value; }
a.oninput = b.oninput = u; u();
06. Tailwind Slider with Step Buttons
TailwindRangeButtons
A thermostat-style control pairing a slider with minus and plus buttons, which are easier than dragging on a phone. The buttons call stepDown and stepUp on the input, so the slider remains the single source of truth.