A default range input works, but the UI feels inconsistent across browsers and it rarely matches a product’s visual language. In this guide you will build a polished slider control: a clean track with a colored fill, a crisp circular thumb, a readable value bubble with a small caret, smooth focus and hover states, and theming with CSS variables. The result is accessible, keyboard friendly, and easy to skin for any brand.
Why The UI of a “Slider” Control Matters
Users judge controls by clarity and feedback. A slider needs a clear track, a visible thumb, and an honest sense of position. Native inputs deliver different visuals per browser, so designers often fight the platform instead of owning the look. With a small layer of CSS (and a few vendor pseudo-elements), you can create a consistent UI that still uses the native range input for semantics and keyboard support. You get the best of both: an accessible control with a visual language that matches the rest of your system.
Prerequisites
You will style a native range input, so there is no framework requirement. You only need comfort with basic HTML and modern CSS. A tiny script helps update CSS variables for the fill and positions the value bubble.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
The markup stays simple and semantic. A label ties to the input for assistive tech, and a wrapper holds the input and a value bubble. The bubble is decorative, so it will be hidden from screen readers. The input still exposes the current value through native range semantics.
<!-- HTML -->
<div class="slider-demo">
<label id="label-volume" for="volume">Volume</label>
<div class="range-wrap">
<input
type="range"
id="volume"
min="0"
max="100"
value="40"
step="1"
aria-labelledby="label-volume" />
<div class="value-bubble" aria-hidden="true">40</div>
</div>
</div>
<script>
// Keep the CSS variable --p (0..100) in sync with the input value,
// and update the text and position of the value bubble.
(function () {
const range = document.getElementById("volume");
const wrap = range.closest(".range-wrap");
const bubble = wrap.querySelector(".value-bubble");
function update() {
const min = Number(range.min) || 0;
const max = Number(range.max) || 100;
const val = Number(range.value);
const p = ((val - min) * 100) / (max - min);
// Progress percentage for CSS
range.style.setProperty("--p", p);
bubble.style.setProperty("--p", p);
// Text for bubble
bubble.textContent = String(val);
}
range.addEventListener("input", update);
range.addEventListener("change", update);
update();
})();
</script>
Step 2: The Basic CSS & Styling
Start with layout and theming variables. The variables control track height, thumb size, colors, and spacing. The range input gets a neutral base and a background composed of two layered gradients: the colored fill on the left and the idle track underneath. The script sets the percentage variable that drives background-size for the fill.
/* CSS */
:root {
--track-h: 6px;
--thumb: 20px;
--radius: 999px;
--fill: hsl(220 90% 56%);
--track: hsl(240 10% 85%);
--track-shadow: hsl(240 8% 75%);
--bg: hsl(0 0% 100%);
--text: hsl(240 6% 20%);
--bubble-bg: hsl(240 8% 15%);
--bubble-fg: white;
--focus: hsl(220 90% 56% / 0.35);
}
/* Page frame for the demo */
body {
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
line-height: 1.5;
color: var(--text);
background: var(--bg);
padding: 3rem 1rem;
}
.slider-demo {
max-width: 520px;
margin: 0 auto;
}
.slider-demo label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
}
/* Positioning wrapper for the range and bubble */
.range-wrap {
position: relative;
padding: 1.75rem 0 1.25rem;
}
/* Base range input */
.range-wrap input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: var(--thumb);
background:
linear-gradient(var(--fill), var(--fill)) 0 50% / calc(var(--p, 0) * 1%) var(--track-h) no-repeat,
linear-gradient(var(--track), var(--track)) 0 50% / 100% var(--track-h) no-repeat;
border-radius: var(--radius);
cursor: pointer;
margin: 0;
padding: 0;
border: 0;
}
/* Accent color as a light-touch fallback in some UAs */
.range-wrap input[type="range"] {
accent-color: var(--fill);
}
/* Remove default outlines but keep a clear focus style */
.range-wrap input[type="range"]:focus {
outline: none;
}
/* WebKit track */
.range-wrap input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: transparent; /* our gradient sits on the input */
height: var(--track-h);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 var(--track-shadow);
}
/* WebKit thumb */
.range-wrap input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: var(--thumb);
height: var(--thumb);
border-radius: 50%;
background: white;
border: 2px solid hsl(240 5% 85%);
box-shadow: 0 1px 2px hsl(0 0% 0% / 0.2);
margin-top: calc((var(--track-h) - var(--thumb)) / 2); /* center thumb on track */
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
/* Firefox track */
.range-wrap input[type="range"]::-moz-range-track {
background: var(--track);
height: var(--track-h);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 var(--track-shadow);
}
/* Firefox progress fill */
.range-wrap input[type="range"]::-moz-range-progress {
background: var(--fill);
height: var(--track-h);
border-radius: var(--radius);
}
/* Firefox thumb */
.range-wrap input[type="range"]::-moz-range-thumb {
width: var(--thumb);
height: var(--thumb);
border-radius: 50%;
background: white;
border: 2px solid hsl(240 5% 85%);
box-shadow: 0 1px 2px hsl(0 0% 0% / 0.2);
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
/* Hover and active feedback */
.range-wrap input[type="range"]:hover::-webkit-slider-thumb,
.range-wrap input[type="range"]:hover::-moz-range-thumb {
border-color: hsl(240 6% 70%);
}
.range-wrap input[type="range"]:active::-webkit-slider-thumb,
.range-wrap input[type="range"]:active::-moz-range-thumb {
transform: scale(1.04);
}
/* Focus ring on the thumb for keyboard users */
.range-wrap input[type="range"]:focus-visible::-webkit-slider-thumb,
.range-wrap input[type="range"]:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 6px var(--focus);
}
/* Value bubble */
.value-bubble {
position: absolute;
left: calc(var(--p, 0) * 1%);
transform: translateX(-50%);
bottom: calc(var(--thumb) + 10px);
background: var(--bubble-bg);
color: var(--bubble-fg);
font-size: 0.875rem;
line-height: 1;
padding: 0.4rem 0.55rem;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
}
/* Bubble caret using a tiny triangle */
.value-bubble::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--bubble-bg);
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.range-wrap input[type="range"]::-webkit-slider-thumb,
.range-wrap input[type="range"]::-moz-range-thumb {
transition: none;
}
}
Advanced Tip: Expose theme values as CSS variables. The thumb size, track height, and colors can be adjusted per component instance with inline styles or class scopes. You can ship a light theme and a dark theme by swapping a small set of variables without touching any selector behavior.
Step 3: Building the Track and Fill
The range track is a long rounded bar. The fill shows progress from min to the current value. The code above draws the track using the input’s own background with two layers: the bottom layer is the full idle track color, and the top layer is the fill color, sized by the percentage. This approach works across engines because the gradients live on the input element, while the vendor track backgrounds are made transparent so they do not block the paint.
/* CSS */
.range-wrap input[type="range"] {
background:
linear-gradient(var(--fill), var(--fill)) 0 50% / calc(var(--p, 0) * 1%) var(--track-h) no-repeat,
linear-gradient(var(--track), var(--track)) 0 50% / 100% var(--track-h) no-repeat;
}
.range-wrap input[type="range"]::-webkit-slider-runnable-track {
background: transparent;
height: var(--track-h);
border-radius: var(--radius);
}
.range-wrap input[type="range"]::-moz-range-track {
background: var(--track);
height: var(--track-h);
border-radius: var(--radius);
}
.range-wrap input[type="range"]::-moz-range-progress {
background: var(--fill);
height: var(--track-h);
border-radius: var(--radius);
}
How This Works (Code Breakdown)
The background shorthand paints two gradients. By giving the top gradient a background-size tied to calc(var(–p) * 1%), the fill grows from 0 to 100 percent of the control width as the script updates –p. Background-position stays at the left center, so the fill always starts from the minimum side. The bottom gradient uses a fixed 100 percent width to act as the base track.
WebKit’s track becomes a transparent container so the input background is visible. Firefox exposes two separate pseudo-elements: ::-moz-range-track and ::-moz-range-progress. That is why the code sets the fill on ::-moz-range-progress in addition to the input background. The rounded ends come from a large border-radius, a simple case of drawing an elongated rectangle. If you want a refresher on building basic shapes, see how to make a rectangle with CSS; the slider track applies the same idea with a small height and full width.
Step 4: Building the Thumb and the Value Bubble
The thumb anchors the user’s perception of the current value, so it needs crisp edges, a clear contrast, and a comfortable target size. The code styles the thumb in both WebKit and Firefox: a white circular knob with a subtle border and shadow. On hover it tightens the border color, on active it scales slightly, and on keyboard focus it shows a soft halo.
/* CSS */
.range-wrap input[type="range"]::-webkit-slider-thumb {
width: var(--thumb);
height: var(--thumb);
border-radius: 50%;
background: white;
border: 2px solid hsl(240 5% 85%);
box-shadow: 0 1px 2px hsl(0 0% 0% / 0.2);
margin-top: calc((var(--track-h) - var(--thumb)) / 2);
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.range-wrap input[type="range"]::-moz-range-thumb {
width: var(--thumb);
height: var(--thumb);
border-radius: 50%;
background: white;
border: 2px solid hsl(240 5% 85%);
box-shadow: 0 1px 2px hsl(0 0% 0% / 0.2);
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.range-wrap input[type="range"]:hover::-webkit-slider-thumb,
.range-wrap input[type="range"]:hover::-moz-range-thumb {
border-color: hsl(240 6% 70%);
}
.range-wrap input[type="range"]:active::-webkit-slider-thumb,
.range-wrap input[type="range"]:active::-moz-range-thumb {
transform: scale(1.04);
}
.range-wrap input[type="range"]:focus-visible::-webkit-slider-thumb,
.range-wrap input[type="range"]:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 6px var(--focus);
}
/* Bubble position and caret */
.value-bubble {
position: absolute;
left: calc(var(--p, 0) * 1%);
transform: translateX(-50%);
bottom: calc(var(--thumb) + 10px);
background: var(--bubble-bg);
color: var(--bubble-fg);
padding: 0.4rem 0.55rem;
border-radius: 6px;
font-size: 0.875rem;
line-height: 1;
}
.value-bubble::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--bubble-bg);
}
How This Works (Code Breakdown)
The thumb uses a 50 percent border-radius to form a circle. If you want a quick primer on circular shapes and proportional scaling, revisit how to make a circle with CSS. The code centers the knob on the track by offsetting margin-top based on the difference between the track height and the thumb size. This keeps the knob perfectly aligned regardless of variable values.
The value bubble’s horizontal position is driven by the same percentage variable as the fill. The left property follows calc(var(–p) * 1%), then translateX(-50%) centers the bubble over that point. The caret uses the classic CSS trick of borders forming a triangle. The upward border supplies the pointer, while the left and right borders stay transparent to sharpen the tip. If that technique is new, see how to make a triangle down with CSS; the bubble applies the same pattern with a contrasting color.
If your product prefers a diamond thumb, you can swap the circular knob with a rotated square. That shape is a rotated rectangle or square at 45 degrees, similar to the approach shown when you make a square with CSS. Rotate it with transform: rotate(45deg) and adjust the hit area so users still get a 40px touch target.
Advanced Techniques: Adding Animations & Hover Effects
Micro-interactions guide the hand and reduce misclicks. The thumb already scales slightly on drag. You can enrich the visual feedback with color transitions, a subtle fill animation when the value changes programmatically, and a springy value bubble motion on hover. Keep motion restrained and short.
/* CSS */
.range-wrap input[type="range"] {
transition: background-size 120ms linear; /* smooth fill updates when JS sets --p */
}
.range-wrap input[type="range"]::-webkit-slider-thumb,
.range-wrap input[type="range"]::-moz-range-thumb {
transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.range-wrap input[type="range"]:hover::-webkit-slider-thumb,
.range-wrap input[type="range"]:hover::-moz-range-thumb {
background-color: hsl(0 0% 100% / 0.95);
}
/* Bubble pop on hover near the thumb */
.range-wrap:hover .value-bubble {
animation: bubble-pop 160ms ease;
}
@keyframes bubble-pop {
0% { transform: translateX(-50%) translateY(2px) scale(0.96); opacity: 0.9; }
100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.range-wrap input[type="range"],
.range-wrap input[type="range"]::-webkit-slider-thumb,
.range-wrap input[type="range"]::-moz-range-thumb,
.range-wrap .value-bubble {
transition: none;
animation: none;
}
}
The input transition on background-size smooths updates when code sets –p, such as when a preset button jumps the slider to a value. The thumb changes feel snappy without looking jittery, and the bubble pop gives users a quick cue that the value is readable.
Accessibility & Performance
Good visuals must not sacrifice interaction or clarity. Keep the control operable by keyboard, expose a readable value, maintain contrast, and guard against motion sensitivity. The browser’s native range element provides a strong base; your CSS should support it rather than fight it.
Accessibility
Use a label linked with for and aria-labelledby, as shown in the HTML. Screen readers announce the role (slider), the label, and the current value. Provide a visible focus indicator on the thumb for keyboard users; the box-shadow halo seen in the code works on both light and dark surfaces. Keep the thumb at least 20 to 24px wide so it is easy to grab. The value bubble is purely visual, so aria-hidden keeps it silent. If you need a live announcement of value changes, pair the input with an aria-live region and update that text on input, or rely on native announcements when the slider has focus.
Check color contrast on the fill against the track. Users should see a clear difference between the filled and unfilled segments at a glance. If the page is dense, consider adding tick marks with background images or a repeating-gradient that places small notches on the track. Large hit targets make touch usage pleasant; the thumb size can scale up via –thumb without any change to JavaScript.
Performance
The approach above is light. Linear gradients and transforms are cheap on modern engines. The most expensive operations in slider UIs are heavy box-shadow animations and large filter effects. Keep shadows subtle and use transforms for hover and active feedback. Background-size updates on a single element are inexpensive since the layout does not change and the browser can avoid a full reflow. The minimal script only sets inline CSS variables and updates two text nodes, which is negligible even on low-power devices.
The last closing paragraph
You now have a deliberate slider UI: a shaped track and fill, a clean thumb, a value bubble with a triangle caret, and focused motion that guides the hand. The structure stays semantic and the visuals travel well across engines. Carry these pieces into your design system and build color, size, and style variants that fit any surface.