17 Tailwind CSS range sliders for e-commerce price filters, media seekbars, audio equalizers, thermostat dials, loan calculators and password strength meters — spanning dual-handle, vertical, circular and centre-origin tracks in neumorphic, neon, glassmorphism, and liquid-glass styles with pop-up value bubbles. Scoped under .trs-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 17 Tailwind range sliders. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
The e-commerce workhorse: two thumbs on one track, an accent-lit segment between them, and a live result count. The port's win is geometry — the CSS original wrote four inline styles per frame and could drift; here two custom properties (--lo, --hi) drive the fill, both handles and both tooltips through calc() utilities, so the lit segment and the handles cannot disagree.
Soft UI done honestly: one base colour, two opposing shadows, and nothing else. The port reads well because neumorphism is entirely a shadow language — shadow-[10px_10px_30px_var(--color-trs02-dark),-10px_-10px_30px_var(--color-trs02-light)] states the extrusion inline, and the pressed state is the same utility with inset and smaller offsets.
A razor-thin track that floods with violet-to-cyan light as the thumb travels, plus a 30-bar intensity meter whose top quarter switches to cyan as a warning zone. The port's gain is that the glow scales with the value: opacity-[calc(0.25_+_var(--v)*0.6)] ties bloom intensity to the reading instead of holding one static shadow.
A five-state feedback scale from miserable to elated, with a pulsing ring, a colour that shifts with the mood, and a star row that follows. The port turns a JS colour-assignment pile into one --mood property: the face tint, ring, label and stars all read it, so a new mood is one array entry and zero style writes.
Four plans, one snapping track, and a progress line that springs into place. The port's honest upgrade is that the step dots are now real buttons — the CSS version drew them as decorations and left tapping "between steps" to chance; here every dot is a 44px control, and the slider remains for keyboard and drag.
The streaming seekbar: a hairline track that thickens on hover, a thumb that blooms out of nothing, a buffer layer, chapter markers and a timecode tooltip that follows the pointer rather than the value. The port replaces a hover-state CSS block with group-hover:/group-focus-within: utilities and one --scrub property.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Ten copper faders in inset steel grooves, dB readouts per band, four presets — and a live SVG response curve above the rack that the CSS original only listed as a "customization". Vertical orientation is one arbitrary utility pair now: [writing-mode:vertical-lr] [direction:rtl].
A 270° thermostat arc that fills from cool blue to warm orange, a target marker, ±1° buttons and an ETA that reacts to the gap between current and target. The port's neat trick: the arc length is an arbitrary property — [stroke-dashoffset:calc(471_-_353*var(--v))] — so the SVG reads the same --v as everything else.
A course-progress slider whose fill carries one continuous sunset gradient and whose big percentage is cut from the same gradient, so number and track are visibly the same object. Three milestone cards light as thresholds pass, and progress survives a reload.
A loan slider whose value bubble springs out of the thumb while you drag, with live monthly payment, total interest and a working term selector. The port deletes four JS event listeners: has-[input:active]: and has-[input:focus-visible]: show the bubble, so pointer and keyboard behave identically.
Brutalism as a system: 3px black rules, zero-blur offset shadows, one red block for a thumb and no rounded corners anywhere. The port suits it — shadow-[6px_6px_0_var(--color-trs11-ink)] and border-[3px] say the whole aesthetic, and the preset row is a real segmented control.
Four strength zones — weak, fair, good, strong — driving a shield, four segments, the fill, the numeral and a live checklist. The port replaces eight inline style writes per change with one --tone property, and the slider is now linked to a real password field: type, and the meter follows.
A pan control anchored at zero: the fill grows left or right from the midpoint in opposing channel colours, a 24-bar visualiser leans with it, and a centre detent snaps the last few units back to dead centre. Both fills are one expression each — max() and clamp() do what an if/else chain did.
An arcade HP meter: segmented bar, gold octagon thumb, a sprite that changes with damage, coin lives and a scanline overlay. The port keeps the crunch — steps() timing, zero-blur shadows, no transitions on the fill — and adds a damage flash and a status line the original only hinted at.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A slider lying flat on a tilted grid plane, with a cast shadow that travels under the thumb and three live metrics. The port is unusually clean: perspective-[800px], transform-3d, rotate-x-30 and -rotate-z-10 are all first-class v4 utilities, so the entire 3D stage is a class list.
Four frosted tracks — R, G, B and opacity — over a four-point radial gradient, with a live swatch, hex and rgba readouts, copy-to-clipboard and an EyeDropper pick. Glass is where Tailwind is strongest: backdrop-blur-xl bg-white/8 border-white/20 is the entire material.
The iOS-style fluid control: the value bubble grows out of the track itself, fused by a gooey SVG filter, then floats over the thumb as you drag. Everything except the filter primitives is a utility — and the show condition is has-[input:active]:, so hover, drag, and keyboard focus all trigger the same morph.
FAQ
Frequently asked questions
How do I make a two-handle range slider like the price filter in demo 01?
A single <input type="range"> only has one thumb, so demo 01 stacks two of them in the same grid cell. Both share a min and max; the lower input caps its value at the upper minus one step and the upper stays above the lower, so the thumbs can never cross. The coloured segment between them is a separate element whose left and width are set from the two values as percentages. The common bug is that the top input swallows every pointer event, leaving the lower thumb dead near the middle — fix it by setting pointer-events: none on the input and re-enabling it only on ::-webkit-slider-thumb and ::-moz-range-thumb, so each thumb stays grabbable but the overlapping tracks don't block each other. Update the live product count and the fill on every input event, not change, so the label tracks the drag.
Why does my range slider look right in Firefox but the thumb floats to the top in Chrome?
Styling a range input means overriding separate shadow-DOM pieces per engine. Set appearance: none on the input first or the native chrome fights your CSS. Then style the thumb via ::-webkit-slider-thumb for Chrome, Safari and Edge, and ::-moz-range-thumb for Firefox, and the rail via ::-webkit-slider-runnable-track and ::-moz-range-track. You cannot merge the WebKit and Firefox selectors into one rule — if either token is unrecognised the whole selector is dropped, which is why the neon demo (03) and brutalist demo (11) declare each thumb rule twice. WebKit thumbs also ignore vertical centring unless the track has an explicit height, so a thumb that sits centred in Firefox floats up in Chrome. Give the track a fixed height and offset the thumb with a negative margin-top of half the height difference.
How do I make the value bubble follow the thumb without it drifting off the ends?
The pop-up bubble in the loan calculator (demo 10) and the liquid-glass slider (demo 17) is positioned by percentage: read (value - min) / (max - min), multiply by 100, and set that as the bubble's left. The bug everyone hits is that the bubble drifts past the track ends — half a thumb too far left at the minimum, half a thumb too far right at the maximum — because the thumb centre never actually reaches 0% or 100%; it is inset by half its own width. Correct it by scaling the offset, roughly left: calc(pct% - (pct/100 - 0.5) * thumbWidth), so the bubble hugs the thumb centre across the whole range. Demo 17 adds a gooey SVG <filter> so the bubble appears to grow out of the track, but the horizontal maths is identical — the filter only fuses the shapes, it does not move them.
How do I build a vertical range slider for the equalizer in demo 07?
Demo 07's ten-band equalizer uses vertical inputs. The modern route is writing-mode: vertical-lr (with direction: rtl so up increases) on a normal <input type="range"> — this is the current replacement for the deprecated appearance: slider-vertical. Older WebKit still needs the -webkit-appearance: slider-vertical fallback plus an explicit width and height, because a vertical input has no intrinsic size and otherwise collapses to zero. Keyboard behaviour rotates too: Up and Right both raise the value, Down and Left lower it, so a fader is fully operable without a mouse. The per-band dB readouts and the SVG response curve are recomputed from each input's value on the input event; nothing about the audio is real, so treat every number as display only.
Are these range sliders accessible, or do I need to add ARIA myself?
Because every slider here is built on a native <input type="range">, keyboard and screen-reader support come for free: arrow keys step by step, Page Up and Page Down jump, Home and End snap to the ends, and the control is announced as a slider with its min, max and current value. Keep that by giving each input a real <label> or an aria-label, and when the visible number is formatted — a price, a percentage, a temperature — add aria-valuetext so the reader hears $1,200 rather than 1200. The emoji mood scale (demo 04) and password meter (demo 12) map discrete states to the value, so set aria-valuetext to the state name such as Good or Elated. Never rebuild the thumb as a <div> with drag handlers — you lose all of the above and re-implement it worse.
Can a range input be circular, or how does the thermostat dial in demo 08 work?
No — a native range input is a straight track, so the thermostat dial (demo 08) is a different mechanism layered over one. It draws a 270° arc as an SVG <path> and animates stroke-dasharray to fill from the cool end to the target, with the marker rotated into place by transform: rotate(). The value still lives in a hidden <input type="range">, so keyboard, min, max and step keep working; the arc is a visual skin over it. The trap is angle-to-value mapping: a 270° dial has a 90° dead zone at the bottom, so clamp pointer angles into the live arc before converting, or dragging through the gap makes the reading jump from max to min. The ±1° buttons just nudge the same input value, which keeps the SVG fill and the number in sync automatically without extra bookkeeping.
How do I make a range slider snap to fixed milestones instead of every number?
The snapping pricing tiers (demo 05) and the segmented HP bar (demo 14) use the input's own step attribute. With four plans you set min="0", max="3" and step="1", so the thumb can only land on 0, 1, 2 or 3 and physically snaps between milestones with no JavaScript rounding. Read the integer value as an index into your plan array to show the name and price. A frequent mistake is leaving step at its default of 1 on a 0–100 range and then rounding in script — that fights the native snapping and makes the thumb feel sticky. If your milestones are not evenly spaced, keep an even step for feel and remap the index to real values through a lookup table rather than distorting the track. The springy progress line is just a CSS transition on the fill width, retriggered each step.
When should I not use a range slider for an input?
Reach for a range slider only when the exact number is soft and the range is continuous — volume (02), a pan control (13), a brightness or colour channel (16). When users need a precise figure, pair the slider with a real <input type="number"> so they can type it, the way the loan (10) and RGBA mixer (16) demos do; a slider alone forces fiddly dragging to hit a value like 1487. Avoid it for more than a handful of discrete choices — past four or five options a set of <input type="radio"> buttons or a <select> reads clearer than counting notches. The centre-origin balance slider (13) is the one to watch: its fill grows from the midpoint in opposing channel colours, not from the left, so a plain left-anchored fill renders backwards — anchor the coloured segment at 50% and let it extend either way.
