Skip to content

Custom Range Slider

Styled range input with a gradient fill, ring thumb and a live value bubble that follows the handle, in pure CSS and a few lines of vanilla JS.

Also known as: range input styling, slider with value tooltip, custom slider with bubble, styled range input

Pure CSS Range Sliders Responsive Dark #form #input #range #responsive #slider

Custom Range Slider live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

A custom range slider built on the native <input type="range">, with a gradient fill, a large ring-style thumb and a value bubble that follows the handle. It is written in pure CSS with a few lines of vanilla JavaScript and suits settings panels, price filters, volume controls and thermostat screens.

How it works

The root section.rs-panel holds a dark card (.rs-card) with three .rs-field blocks. Each field contains a label row and a .rs-track-wrap with an <output class="rs-bubble"> and the input.rs-input. Because the slider stays a real range input, it keeps native keyboard support, form submission and touch dragging.

The CSS removes the default appearance and restyles the parts with ::-webkit-slider-runnable-track, ::-webkit-slider-thumb, ::-moz-range-track, ::-moz-range-progress and ::-moz-range-thumb. Everything is driven by one custom property, --rs-pct (0 to 100). The WebKit track paints the gradient up to that point, and the bubble uses the same formula for its left position, calc(var(--rs-pct) * 1% + (0.5 - var(--rs-pct) / 100) * var(--rs-thumb)), so it stays centered over the thumb at both ends. Firefox fills the track natively with ::-moz-range-progress.

On DOMContentLoaded the script finds every .rs-field inside each .rs-panel. On input and change it calculates the percentage from min, max and value, writes --rs-pct on the field, formats the number with Intl.NumberFormat (decimal places follow the step attribute) and puts the text into the bubble and aria-valuetext.

Customization

  • --rs-accent and --rs-accent-2 on .rs-panel: the two colors of the track fill, the bubble gradient and the thumb ring.
  • .rs-field--cool: a modifier that overrides the accent pair with cyan and indigo, as on the temperature slider. Copy the idea to create more color variants.
  • --rs-thumb and --rs-track-h: thumb diameter and track thickness; the bubble position adapts automatically.
  • data-prefix and data-suffix on .rs-input: text around the value, e.g. data-prefix="$" or data-suffix=" °C".
  • min, max, step and value on .rs-input: a step of 0.5 shows one decimal place in the bubble.
  • --rs-card, --rs-bg and --rs-track: card, page and empty track colors for a lighter theme.

Use cases

  • Settings panels: a gradient fill and value bubble show the chosen level as users drag
  • Price filters: the bubble shows a prefixed amount like a dollar value above the handle
  • Volume controls: a large ring thumb is easy to grab on touch screens
  • Thermostat screens: a cooler color variant with a suffix shows temperatures in degrees

Accessibility

Each slider has a visible <label for>, and the <output> is linked to its input with for. The script sets aria-valuetext so screen readers announce "$850" or "21.5 °C" instead of a bare number. Arrow keys, Page Up/Down, Home and End work natively. The thumb shows a double focus ring on :focus-visible, and the bubble lifts slightly while the field is focused. With prefers-reduced-motion: reduce the scale and lift transitions are turned off.

Usage notes

Without JavaScript the sliders still work, but the bubble and fill stay at their default position. Add more sliders by copying a .rs-field block with a unique id.

Custom Range Slider at a glance

Framework
Pure CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
None
Layout
Responsive, works on mobile, dark design
Category
Range Sliders
License
Free for personal and commercial use

Questions about this template

Can I use the Custom Range Slider code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

Custom Range Slider – Pure CSS range sliders component screenshot
Custom Range Slider · Pure CSS Range Sliders

More Range Sliders

Dual Range Price Slider – Tailwind CSS range sliders preview

Dual Range Price Slider

Tailwind CSS min/max price slider with two handles, synced number inputs and a live histogram that counts products in the selected range.

Tailwind CSS Range Sliders