Range Slider Generator

Create beautifully styled HTML range inputs with custom thumb, track, and focus ring styles.

Thumb

Thumb Size20px

Thumb Border Radius50%

Thumb Color

Track

Track Height6px

Track Border Radius99px

Track Color

Focus Ring Color

Preview

Generated CSS

input[type="range"].styled-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}

/* Thumb — Chrome/Safari */
input[type="range"].styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #0071e3;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

/* Thumb — Firefox */
input[type="range"].styled-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #0071e3;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Focus ring */
input[type="range"].styled-slider:focus {
  box-shadow: 0 0 0 4px #93c5fd66;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Range Slider Generator?

Style custom range input sliders with CSS. Configure thumb size, track height, fill colour, and hover states.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Range Slider Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Set track height and colour

The track is the horizontal bar. Set its height (2px-8px) and background colour for the unfilled portion.

Configure the thumb

Set thumb diameter (12px-24px) and colour. The thumb is the draggable handle.

Copy the CSS

Both -webkit and -moz syntaxes are included. Apply the class to your range input element.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

range-slider.css

input[type="range"].custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
}

input[type="range"].custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0071e3;
  cursor: pointer;
  transition: transform 0.1s;
}

input[type="range"].custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

input[type="range"].custom-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: #0071e3;
  cursor: pointer;
}

Range inputs require separate -webkit-slider-thumb and -moz-range-thumb rules. Chromium-based browsers (Chrome, Edge, Opera, Safari) use the -webkit prefix. Firefox uses -moz.

Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Missing appearance: none on the input

Without appearance: none, the browser default range track renders over the custom track.

Fix: Add both -webkit-appearance: none and appearance: none to the input[type="range"] rule.

Pro tips

Pro tips for better results

★

Show fill progress with a linear-gradient background

CSS cannot natively fill the track up to the thumb position. Use a JavaScript input event listener to update a CSS custom property and apply it as a linear-gradient background on the track.

FAQ

Frequently asked questions

Use a JavaScript input event listener: slider.addEventListener("input", () => output.textContent = slider.value). Bind the output element to update as the thumb moves.

Yes. Add writing-mode: vertical-lr to the input and the track will render vertically. Thumb styling still works.