17 CSS Range Sliders

The native range input is one of the few HTML elements where each browser still ships its own shadow-DOM internals — there's no single cross-browser selector for the thumb or track yet. The recipe: (1) zero out the platform default with appearance: none (and -webkit-appearance: none for older Safari) on the input[type=range] itself; (2) style the WebKit/Blink track with ::-webkit-slider-runnable-track and the thumb with ::-webkit-slider-thumb (Chrome, Edge, Opera, Safari); (3) style the Firefox track with ::-moz-range-track and the thumb with ::-moz-range-thumb; (4) re-apply the thumb size with margin-top calculations on WebKit so the thumb visually centers on the track. The new spec-track pseudo-elements (::slider-thumb, ::slider-track) are landing in Chrome 138+ but you still need the vendor-prefixed selectors for the next 2-3 years. Every demo in this collection ships both webkit + moz selectors duplicated so the slider looks identical in all four major browsers.

The native <input type=range> only supports ONE thumb. The two-thumb dual-handle pattern requires stacking TWO range inputs on top of each other with position: absolute; pointer-events: none on the track, then giving each handle independent pointer-events: auto. The lower input handles the MIN value, the upper input handles the MAX value; JS clamps the two so they can't cross (max = Math.min(maxInput, minInput - 1)). The visible filled track between the two thumbs is rendered as a separate <div> that listens to both inputs and updates its left + right percentages on every input event. Demo #01 (Price Range Slider with Dual Handles) ships the full recipe with min/max display and the e-commerce-style currency formatting. This is the #1 dual-handle slider pattern across Amazon, Shopify, and every product filter you've ever used.

Yes. The native <input type=range> is keyboard-accessible out of the box: arrow keys decrement/increment by step, Page Up/Down jump by 10×, Home/End go to min/max. Screen readers announce the value via the input's implicit ARIA role of slider plus the aria-valuenow attribute the browser sets automatically. To make a CUSTOM-STYLED range slider equally accessible, three rules: (1) NEVER replace the native input with a div-based slider — keep the native input as the source of truth and style its pseudo-elements; div sliders re-implement focus + keyboard handling and almost always break it. (2) Add a visible :focus-visible outline on the thumb so keyboard users see where focus is. (3) Wrap continuous animations in @media (prefers-reduced-motion: reduce) so users with vestibular sensitivity get instant feedback instead of moving thumbs. Every demo in this collection follows these three rules.

Firefox's ::-moz-range-thumb pseudo-element behaves differently from WebKit's ::-webkit-slider-thumb in three subtle ways most tutorials miss: (1) Firefox renders a thin focus outline INSIDE the thumb by default — kill it with ::-moz-focus-outer { border: 0 } and add your own :focus-visible outline. (2) Firefox respects appearance: none on the input but you also need appearance: none on ::-moz-range-thumb itself or it shows the platform dot inside your custom thumb. (3) Firefox positions the thumb VERTICALLY-CENTERED on the track automatically, but WebKit doesn't — you need margin-top: calc((track-height - thumb-height) / 2) on ::-webkit-slider-thumb to match. This is the #1 unanswered Stack Overflow question about range sliders. Every demo in this collection ships both webkit AND moz selectors with the centering math correct.

True circular range inputs aren't a native HTML primitive — <input type=range> is always linear. The dial pattern (demo #08 Circular Radial Dial) wraps a hidden linear range input inside a circular SVG arc, then JS maps pointer angle to the input's value. The visible dial is the SVG: a background arc (the track) + a foreground arc whose stroke-dasharray equals the circumference and whose stroke-dashoffset interpolates with the input's value to draw the filled portion. The thumb is a small SVG circle positioned at the angle corresponding to the current value (basic trig: cx = centerX + radius * cos(angle), cy = centerY + radius * sin(angle)). Pointer events on the SVG (or wrapper div) compute the angle from the centre and dispatch input events on the hidden native range so all the accessibility benefits (keyboard, screen reader, aria-valuenow) work for free. Total: ~60 lines of JS for the production pattern.

Two approaches with different tradeoffs. (A) writing-mode: vertical-lr + direction: rtl on the input — pure CSS, no JS, the browser handles all the keyboard interaction (Up/Down arrows work correctly), but Firefox renders the thumb slightly differently and you lose fine control over the track + thumb geometry. (B) Set appearance: slider-vertical (WebKit) + -moz-orient: vertical (Firefox) plus an explicit transform: rotate(-90deg) on the input with width/height swapped — older approach, more compatible, but transforms break some keyboard handling and screen reader announcements. Demo #07 (Vertical Audio Equalizer) ships the writing-mode approach because it's more accessible and the spec-blessed direction for the future. The equalizer demo composes 5 vertical sliders side-by-side with frequency labels — paste it into a music player UI and ship.

Position a small <div class="bubble"> absolutely above the input track. On every input event, JS reads the input's value and sets the bubble's left to a percentage of the track width: bubble.style.left = ((value - min) / (max - min) * 100) + '%'. Apply transform: translateX(-50%) on the bubble so it centers on the thumb's vertical centerline rather than starting at it. The bubble's ::after pseudo-element is a small triangle pointing down at the thumb (CSS triangle via 0 border on 3 sides). The visible bubble appears on :focus or :active and fades out 1-2 seconds after the user releases the thumb. Demo #10 (Bubble Pop Tooltip Slider) ships the full pattern with currency formatting for a loan calculator use case ($15,000, $45,000, etc.). Common UI on banks, finance dashboards, and SaaS pricing tiers.

The big gallery sites (FreeFrontend 40+, FrontendPlanet 76, uiCookies 35) curate links to CodePen demos — you click out, view the demo on CodePen, copy code, paste it into your project. The demos use generic class names like .slider, .range, .thumb that collide if you paste two into one project; many have no Firefox styling at all because the original author tested only Chrome. Slider Revolution is a premium WordPress plugin marketing page, not a free code resource. LogRocket / CSS-Tricks / a11y with Lindsey are deep technical tutorial articles — great for learning, not for copy-paste UI. This collection sits in a different niche: on-page interactive playgrounds for all 16 designs (try them in your browser without leaving the tab), every demo scoped under a unique .rs-NN prefix so they NEVER collide when pasted together, every demo cross-browser tested with both ::-webkit-slider-thumb and ::-moz-range-thumb styles, and every demo wrapped in @media (prefers-reduced-motion: reduce) for accessibility. Free, MIT-licensed, no signup.