40 Interactive CSS Range Slider Examples

Q: How do I style a range slider in CSS?

Apply -webkit-appearance: none to remove default styling. Target ::-webkit-slider-thumb and ::-webkit-slider-runnable-track for WebKit browsers. Use ::-moz-range-thumb and ::-moz-range-track for Firefox. Set background, height, and border-radius properties.

Q: How do I make a vertical range slider?

Use writing-mode: bt-lr with -webkit-appearance: slider-vertical for native behavior. Alternatively, apply transform: rotate(-90deg) to the input. Firefox also supports the orient="vertical" HTML attribute.

Q: How do I add a fill color to the slider track?

Apply a linear-gradient background to the track. Use CSS custom properties to set the fill percentage and update the variable with JavaScript on input change. The gradient creates a two-tone effect showing the selected range.

Q: Can I animate a CSS range slider?

Yes. Add transition properties to thumb and track elements. Target :hover, :active, and :focus-visible states. Apply transform: scale() for size changes and background-color transitions for smooth interaction effects.

Q: Which CSS frameworks include range slider components?

Tailwind CSS offers utility-based range styling. Bootstrap provides basic form styling. Flowbite extends Tailwind with pre-built sliders. Material UI and Vuetify include fully styled components with built-in accessibility.

Summarize this article with:

ChatGPT Claude Perplexity Grok

Default range sliders look terrible. Every browser renders them differently, and none match your site’s design.

These CSS range slider examples fix that problem. You’ll find working code for custom thumbs, styled tracks, dual handles, value indicators, and animated interactions.

The native <input type="range"> element handles the functionality. CSS transforms the appearance.

This collection covers everything from basic styling to advanced techniques like neumorphic designs, gradient fills, and accessible implementations that work across Chrome, Firefox, Safari, and Edge.

Copy the code. Adjust the colors. Ship a slider that actually fits your project.

What is a CSS Range Slider

A CSS range slider is a form input element that lets users select a value by dragging a thumb along a track.

The native <input type="range"> element renders a horizontal slider control in browsers like Chrome, Firefox, Safari, and Microsoft Edge.

Custom styling removes default browser appearances through the appearance: none property.

Pseudo-elements like ::-webkit-slider-thumb and ::-moz-range-track handle the visual design of thumb and track components.

Range sliders work without JavaScript for basic functionality, though dynamic value displays need scripting.

CSS Range Slider Examples To Check Out

Budget Slider: Your 3D Financial Advisor

See the Pen
budgetSlider by Hornebom (@Hornebom)
on CodePen.

Range Slider Styling: Where Elegance Meets Function

See the Pen
Range Slider Stylin’ Experiment by Adam Clark (@adamstuartclark)
on CodePen.

Rolling Slider: Slide with a Penguin Buddy

See the Pen
Rolling Range Slider by phil (@pwambach)
on CodePen.

Car Animation with Range Slider: Drive into the Digital World

See the Pen
Car animation with range slider by Pankaj Dhiman (@iampankajdhiman)
on CodePen.

Range Slider Equalizer: Music to the Eyes

See the Pen
#Stylesheet# input[type=’range’]__Equalizer by Long Lazuli (@long-lazuli)
on CodePen.

Color Range Slider: Trendy Gradients for the Win

See the Pen
Color range slider by Gabriel Tomescu (@gabrieltomescu)
on CodePen.

Responsive Sliders: Flexibility at Its Finest

See the Pen
Modern, Usable, Responsive Sliders. by Simon Goellner (@simeydotme)
on CodePen.

Time Range Slider: Ticking the Stylish Way

See the Pen
Time Range Slider by Sean Mooney (@srmooney)
on CodePen.

Cube Range Slider: 3D Magic in Motion

See the Pen
prettify `<input type=range>` #91 by Ana Tudor (@thebabydino)
on CodePen.

Range Slider Output: Trendsetter Alert

See the Pen
Range slider output by Michael Wolthers Nielsen (@wolthers)
on CodePen.

Flat Range Sliders: Red Hot Design

See the Pen
Flat Range Sliders by Rosh Jutherford (@the_ruther4d)
on CodePen.

Soft Dial: Minimalism Meets Elegance

See the Pen
Soft Dial by Chris Gannon (@chrisgannon)
on CodePen.

Range Slider with a Splash

See the Pen
CSS Custom Range Slider by Brandon McConnell (@brandonmcconnell)
on CodePen.

Rounded Range Slider: Circle of Style

See the Pen
Rounded Range Slider by Sabine Robart (@_Sabine)
on CodePen.

Draggable Price Scale: Precision Perfected

See the Pen
Draggable Price Scale by Wayne Roddy (@dubrod)
on CodePen.

Spicy Slider: Hot ‘n’ Sizzling

See the Pen
Spicy Slider (+ secret level) by Nicolas Jesenberger (@nicolasjesenberger)
on CodePen.

Balloon Range Slider in SVG: Floating Fun

See the Pen
SVG Balloon Slider by Chris Gannon (@chrisgannon)
on CodePen.

Price Range Slider: Shop ‘n’ Slide

See the Pen
price range slider by Dima (@dimaZubkov)
on CodePen.

Minimal Styling: Pure CSS Love

See the Pen
Minimal input range styling (CSS only) by Renaud Tertrais (@renaudtertrais)
on CodePen.

Futuristic Slider: The Future is Round

See the Pen
Skeuo-futuristic-slider by LukyVJ (@LukyVj)
on CodePen.

Cartoon Inspired Smoke Range Slider: Animated Attraction

See the Pen
Smoke Slider by Aaron Iker (@aaroniker)
on CodePen.

Gradient Range Slider: Color Flow Like A Pro

See the Pen
Gradient Range Slider by Eric Grucza (@egrucza)
on CodePen.

Double Slider: Twice the Fun

See the Pen
Double slider by Gabi (@enxaneta)
on CodePen.

Fluid Temperature Input Range: Hot or Cold?

See the Pen
No SVG, no image, CSS-only fluid slider with input[type=range] by Ana Tudor (@thebabydino)
on CodePen.

Range Input: Change on the Go

See the Pen
Range Input: change live value by Jorge Epuñan (@juanbrujo)
on CodePen.

Scalable 3D Range Sliders: Dive into Dimensions

See the Pen
Day 5: Scalable 3D Range Sliders by Angela He (@zephyo)
on CodePen.

Cross-Browser Range: Universal Coolness

See the Pen
Cross-Browser Range Input With Solid Lower Fill by Noah Blon (@noahblon)
on CodePen.

Range Input Fancy Slider Bars: Rainbow Ride

See the Pen
1 range input fancy slider bars by Ana Tudor (@thebabydino)
on CodePen.

Neumorphism – Range Slider: Sleek & Chic

See the Pen
styled range slider by jonna (@jonnaru)
on CodePen.

Dynamic Grid Background: Gradient Galore

See the Pen
dynamic grid background with custom properties by Allison Richmond (@vengeanceindustries)
on CodePen.

Gear Slider: Spin the Style

See the Pen
Gear Slider by Mariusz Dabrowski (@MarioD)
on CodePen.

Loan Range: Show Me the Money!

See the Pen
Range by Reza Lavarian (@lavary)
on CodePen.

Radio Button Dot-slider: Slide without Script

See the Pen
Radio Button Dot-Slider (Pure CSS) by Brandon McConnell (@brandonmcconnell)
on CodePen.

How Does the HTML Input Range Element Work

The HTML input range element generates a draggable slider control through native browser rendering.

Four attributes control behavior:

min sets the lowest selectable value
max defines the upper limit
value determines the starting position
step controls increment size between values

Default rendering varies across browsers.

Chrome and Safari use WebKit styling. Firefox applies its own track and thumb designs. This inconsistency drives the need for custom CSS styling.

The slider thumb moves horizontally by default, responding to mouse drag, touch input, and keyboard arrow keys.

Why Style Range Sliders with CSS

Default range inputs look different in every browser.

Chrome renders a blue track with a circular thumb. Firefox shows a gray bar. Safari adds its own styling quirks.

Custom CSS fixes these cross-browser compatibility issues and creates consistent user experience across platforms.

Brand consistency matters. A styled slider matches your site’s color scheme, typography, and overall user interface design.

Web accessibility improves with visible focus states, larger touch targets, and clear value indicators.

Cross-Browser Styling Considerations

WebKit browsers (Chrome, Safari, Edge) use ::-webkit-slider-thumb and ::-webkit-slider-runnable-track.

Firefox requires ::-moz-range-thumb and ::-moz-range-track.

Always apply -webkit-appearance: none first to strip default styling before adding custom properties.

How to Create a Basic CSS Range Slider

Start with the HTML input element:

“ <input type="range" min="0" max="100" value="50"> `

Remove default appearance and set dimensions:

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

Style the thumb for WebKit browsers:

` input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: #007bff; border-radius: 50%; cursor: pointer; } `

Add Firefox support with ::-moz-range-thumb using identical values.

Setting Track Height and Background Color

Track height controls visual weight. Use 4-8px for subtle sliders, 10-15px for prominent ones.

Background color applies through the background property on the main input element or track pseudo-element.

Customizing the Thumb Shape and Size

The thumb accepts width, height, border-radius, background, and box-shadow properties.

Square thumbs use border-radius: 0. Circular thumbs need border-radius: 50%.

How to Build a Range Slider with Value Indicator

Displaying the current value requires JavaScript to update a visible element on input change.

HTML structure:

` <div class="slider-container"> <input type="range" id="slider" min="0" max="100" value="50"> <output id="output">50</output> </div> `

JavaScript event handling:

` const slider = document.getElementById('slider'); const output = document.getElementById('output');

slider.addEventListener(‘input’, function() { output.textContent = this.value; }); `

The oninput event fires continuously during drag, providing real-time feedback.

This creates an interactive element that responds to user input instantly.

Positioning the Value Label Above the Thumb

Use CSS custom properties to track thumb position, then translate a tooltip element horizontally based on the current value percentage.

A CSS tooltip positioned with transform: translateX() follows the thumb across the track.

How to Create a Dual Range Slider (Two Handles)

Dual handle sliders let users set a minimum and maximum value. Price filters on e-commerce sites use this pattern constantly.

Native HTML doesn’t support two thumbs on one input. You need two separate range inputs overlaid on each other.

HTML structure:

` <div class="dual-slider"> <input type="range" id="min" min="0" max="1000" value="200"> <input type="range" id="max" min="0" max="1000" value="800"> </div> `

CSS positioning stacks both inputs using position: absolute with transparent tracks. Only the thumbs remain visible.

The z-index property manages thumb overlap at intersection points. pointer-events: none on the track allows clicks to pass through to the correct handle.

Setting Minimum and Maximum Gap Between Handles

JavaScript validation prevents handles from crossing by comparing values on each input event and enforcing a minimum gap value between them.

How to Make a Vertical CSS Range Slider

Vertical sliders work for volume controls, equalizers, and compact mobile interfaces.

Two methods exist:

` / Method 1: Writing mode / input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; }

/ Method 2: Transform rotation / input[type=”range”] { transform: rotate(-90deg); transform-origin: center; } `

The writing-mode approach maintains native behavior. The transform method rotates the entire element, requiring container adjustments.

Firefox supports orient=”vertical” as an HTML attribute directly on the input element.

How to Add Fill Effect to the Track

The fill effect colors the track from start to current thumb position. Creates visual feedback showing selected range.

CSS linear-gradient on the track background handles this:

` input[type="range"] { background: linear-gradient(to right, #007bff 0%, #007bff var(--value), #ddd var(--value), #ddd 100%); } `

JavaScript updates the –value CSS custom property on input change. Use our CSS Gradient Generator to create custom color combinations.

Alternative approach: apply box-shadow on the thumb element extending leftward to simulate track fill without gradients.

Gradient Color Change Based on Value Position

Dynamic gradients shift colors as the thumb moves. Low values show red, mid-range shows yellow, high values show green. Perfect for rating systems and progress indicators.

What Are Popular CSS Range Slider Design Styles

Design trends influence slider aesthetics. Match your slider style to overall site design for visual consistency.

Neumorphic Range Slider

Soft shadows create raised or inset effects. Combine light and dark box-shadow values on both track and thumb. Use our CSS Box Shadow Generator for precise shadow values.

Pure CSS implementation. No JavaScript needed for the CSS neumorphism styling effect.

Flat Design Range Slider

Solid colors without gradients or shadows. Sharp edges with minimal border-radius. Fits minimalist design systems. Clean and fast-loading.

Material Design Range Slider

Google’s design language. Active state animations with CSS ripple effects on thumb interaction. Subtle elevation changes through shadow manipulation.

3D Range Slider

Uses CSS perspective and transform properties. Cube indicators or depth effects create dimensional appearance. Higher performance cost than flat alternatives.

Radial (Circular) Range Slider

SVG-based implementation or CSS transform techniques. Center displays current value. Common for volume knobs and gauge interfaces.

How to Add Animation to Range Slider Interactions

Micro-interactions make sliders feel responsive and polished.

Target these states:

:hoverfor mouse proximity
:activefor click/drag state
:focus-visible for keyboard navigation

Add transition properties to thumb and track elements for smooth state changes.

Thumb Scale Effect on Active State

Apply transform: scale(1.2) on :active state. Add transition: transform 0.15s ease for smooth scaling animation.

Track Color Transition on Value Change

CSS transitions on background-color create smooth color shifts. JavaScript triggers class changes or updates CSS custom properties dynamically.

How to Make an Accessible Range Slider

ARIA attributes communicate slider state to screen readers.

Required attributes:

aria-valuemin matches the minattribute
aria-valuemax matches the maxattribute
aria-valuenowupdates with current value
aria-label describes the slider purpose

Keyboard navigation works natively. Arrow keys adjust values. Ensure visible focus states meet color contrast requirements.

Touch targets should measure at least 44×44 pixels for mobile-first design compliance.

What Are Common Use Cases for CSS Range Sliders

Price Range Filter for E-Commerce

Dual handle implementation showing min/max price selection. Displays formatted currency values. Connects to product filtering through JavaScript or Ajax requests.

Volume and Audio Controls

Vertical or horizontal orientation. Icon integration showing muted/low/high states. Pairs with HTML5 audio API for media playback control.

Image Brightness and Contrast Adjustment

Real-time preview updates using CSS filter property. Slider value maps directly to brightness() or contrast() functions. Use our CSS Color Filter Generator for preset values.

Rating and Survey Inputs

Emoji or icon indicators at different positions. Segmented steps for discrete values. Similar functionality to CSS star rating components but linear.

Progress and Loading Indicators

Read-only display showing completion percentage. Similar to CSS progress bars but with thumb indicator. Animation-driven value changes for automated progress.

Which CSS Properties Control Range Slider Appearance

Key properties for slider customization:

appearance: noneremoves default browser styling
backgroundsets track color or gradient
border-radiuscontrols rounded corners via CSS Border Radius Generator
box-shadowadds depth and glow effects
cursor: pointerindicates interactivity
height and widthset dimensions
outline controls focus ring appearance

Vendor-prefixed properties still required for full browser support in 2024.

How to Handle JavaScript Value Updates

Event listener pattern:

` slider.addEventListener('input', (e) => { const value = e.target.value; document.documentElement.style.setProperty('--slider-value', value + '%'); output.textContent = value; }); `

The input event fires continuously during drag. The change event fires only on release.

CSS custom properties enable real-time styling updates without class manipulation. Frontend frameworks like React and Vue handle this through state binding.

Which CSS Frameworks Support Range Slider Components

Tailwind CSS provides utility classes: range-sm, range-lg for sizing. Flowbite extends Tailwind with pre-built slider components.

Bootstrap includes basic range styling through Bootstrap form classes. Custom styling still needed for advanced designs.

Component libraries like Material UI (React) and Vuetify (Vue) offer fully styled slider components with built-in accessibility.

CSS Range Slider Code Examples

Pure CSS Range Slider (No JavaScript)

` input[type="range"] { -webkit-appearance: none; width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; }

input[type=”range”]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #2196f3; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } `

Range Slider with Tooltip Value Display

Combines HTML structure, CSS positioning, and JavaScript event handling for a floating tooltip that follows the thumb and displays the current value in real-time.

Dual Handle Price Filter Slider

Two overlaid inputs with transparent tracks. JavaScript manages handle collision prevention and value display formatting for currency.

Animated Gradient Range Slider

Uses CSS animation with CSS keyframes for color transitions. Gradient position updates through CSS custom properties on input change.

Custom Tick Marks and Labels

HTML element provides native tick marks. Custom implementations use positioned elements styled with flexbox for even distribution along the track.

FAQ on CSS Range Slider Examples

How do I style a range slider in CSS?

Apply -webkit-appearance: none to remove default styling. Target ::-webkit-slider-thumb and ::-webkit-slider-runnable-track for WebKit browsers. Use ::-moz-range-thumb and ::-moz-range-track for Firefox. Set background, height, and border-radius properties.

Why does my range slider look different in Firefox and Chrome?

Each browser uses different rendering engines with unique default styles. WebKit powers Chrome and Safari. Firefox uses Gecko. You need vendor-prefixed pseudo-elements for each browser to achieve consistent cross-browser appearance.

How do I add a value indicator to a range slider?

Create an output element next to the input. Add a JavaScript event listener on the input event. Update the output's text content with this.value on each change. Position the indicator using CSS.

Can I create a range slider with two handles?

Yes. Overlay two separate range inputs using position: absolute. Make tracks transparent so only thumbs show. Use JavaScript to prevent handles from crossing and display min/max values. Common for price filter components.

How do I make a vertical range slider?

Use writing-mode: bt-lr with -webkit-appearance: slider-vertical for native behavior. Alternative method: apply transform: rotate(-90deg) to the input. Firefox supports the orient=”vertical” HTML attribute directly.

How do I add a fill color to the slider track?

Apply a linear-gradient background to the track. Use CSS custom properties to set the fill percentage. Update the variable with JavaScript on input change. The gradient creates a two-tone effect showing selected range.

Are CSS range sliders accessible?

Native range inputs support keyboard navigation by default. Add aria-valuemin, aria-valuemax, and aria-valuenow attributes for screen readers. Ensure visible focus states and sufficient touch target size for mobile users.

How do I change the thumb size on a range slider?

Target the thumb pseudo-element with ::-webkit-slider-thumb or ::-moz-range-thumb. Set width and height values. Apply border-radius: 50% for circular shape. Add box-shadow for depth effect.

Can I animate a CSS range slider?

Yes. Add transition properties to thumb and track elements. Target :hover, :active, and :focus-visible states. Apply transform: scale() for size changes. Use background-color transitions for smooth color shifts during interaction.

Which CSS frameworks include range slider components?

Tailwind CSS offers utility classes like range-sm and range-lg. Bootstrap provides basic form styling. Flowbite extends Tailwind with pre-built sliders. Material UI and Vuetify include fully styled components with built-in accessibility.

Conclusion

These CSS range slider examples give you production-ready code for any project. From basic slider thumb styling to dual handle implementations, you have the templates to build exactly what you need.

The pseudo-elements handle cross-browser rendering. JavaScript manages dynamic value updates. Proper ARIA attributes ensure screen reader compatibility.

Pick a design style that fits your interface. Neumorphic for modern apps. Flat for minimalist sites. Material Design for Google-aligned projects.

Test on mobile devices. Touch targets need adequate size. Vertical sliders work better in compact layouts.

The input type=”range”` element does the heavy lifting. Your CSS makes it look professional. Start with the basic example, then add animations and gradient fills as needed.