Style Input Range
Styling the HTML <input type="range"> element is notoriously awkward. Unlike most form elements, the range slider is made up of multiple internal parts - the thumb (the draggable handle) and the track (the bar it slides along) - each of which requires separate, browser-specific pseudo-elements to target. Chrome, Edge, and Safari use ::-webkit-slider-thumb and ::-webkit-slider-runnable-track, while Firefox uses ::-moz-range-thumb and ::-moz-range-track. On top of that, you must explicitly set appearance: none on the input before any of your custom styles will take effect, otherwise the browser's native styling overrides everything you write.
This generator removes that friction entirely. Adjust the thumb size, shape, color, border, and shadow. Set the track height, color, border radius, and border. Enable a progress fill to color the track from the left edge up to the current thumb position. Every change is reflected instantly in the live preview, and the complete CSS - along with any JavaScript needed for the progress fill - is generated and ready to copy into your project.
If you want a head start, choose one of the preset designs as a starting point and customise from there.
Style Input Range
About Style Input Range
The HTML <input type="range"> element is used to create a slider control, typically for selecting a value within a specified range. CSS can be used to customize the appearance of these input range elements, such as changing their color, size, and other visual properties.
A CSS input style range generator is a tool that helps you customize the look and feel of these range input elements without having to write all the CSS styles from scratch. It provides options or configurations to customize the appearance of the range slider, and then it generates the CSS code for you to use in your web project.
These generators can be useful for web developers and designers who want to create visually appealing and consistent UI elements without the need to manually write and tweak the CSS for input range elements. They can save time and make it easier to style these elements to match a particular design or theme.
Frequently Asked Questions
How do I style an input range slider with CSS?
The <input type="range"> element is made up of two main parts: the thumb (the draggable handle) and the track (the bar it slides along).
Each part is targeted using browser-specific pseudo-elements.
The thumb is styled with ::-webkit-slider-thumb in Chrome, Edge, and Safari, and ::-moz-range-thumb in Firefox.
The track is styled with ::-webkit-slider-runnable-track and ::-moz-range-track respectively.
You must also set -webkit-appearance: none; and appearance: none; on the input itself before any custom styles will take effect, as browsers apply their own default styling by default.
How do I change the color of a range slider track in CSS?
Target the track pseudo-element for each browser and set a background color. For example:
input[type="range"]::-webkit-slider-runnable-track { background: #4f46e5; }
input[type="range"]::-moz-range-track { background: #4f46e5; }
You can use any valid CSS color value including hex, RGB, HSL, or a gradient. Note that styles applied to the ::-webkit- pseudo-elements have no effect in Firefox and vice versa, so you need both declarations for full browser coverage.
How do I style the thumb of a range slider?
Use the ::-webkit-slider-thumb pseudo-element for Chrome, Edge, and Safari, and ::-moz-range-thumb for Firefox.
First make sure -webkit-appearance: none; is set on the thumb itself (in addition to the input), otherwise Webkit browsers ignore your styles.
From there you can set width, height, border-radius (use 50% for a circle), background, border, and box-shadow just like any other element.
How do I add a progress fill color to a CSS range slider?
Native CSS alone cannot reliably fill the track up to the current thumb position across all browsers.
Firefox supports ::-moz-range-progress for this, but Chrome and Safari do not have an equivalent pseudo-element.
The cross-browser approach is to use a small JavaScript snippet that updates a CSS custom property or a linear-gradient on the track in real time as the slider moves.
The generated code from this tool includes the required JS for this effect alongside the CSS.
Why does my range slider styling not work in all browsers?
Range slider pseudo-elements are browser-specific and not yet standardised. Chrome, Edge, and Safari use ::-webkit- prefixed pseudo-elements, while Firefox uses ::-moz- prefixed ones.
The most common reason styling fails is forgetting to set appearance: none; (and -webkit-appearance: none;) on the <input> element - without this, the browser's native stylesheet overrides your custom styles.
Always include both the prefixed and unprefixed versions of each declaration to cover all modern browsers.
How do I make a range slider thumb a circle?
Set equal width and height values on the thumb pseudo-element and apply border-radius: 50%. For example:
input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; border-radius: 50%; }
Remember to also set -webkit-appearance: none; on the thumb, as Webkit browsers will not apply border-radius until the default appearance is removed.
How do I change the height of a range slider track?
Set the height property on the track pseudo-elements:
input[type="range"]::-webkit-slider-runnable-track { height: 8px; }
input[type="range"]::-moz-range-track { height: 8px; }
If you make the track thinner than the thumb, the thumb will visually overflow the track - which is often intentional for a modern look. Add border-radius to the track to give it rounded ends.
Can I style a range slider without JavaScript?
You can style the thumb and track appearance entirely with CSS - colors, size, border-radius, shadows, and borders all work without any JavaScript.
The one thing that requires JavaScript is a progress fill on the track (the colored portion from the left edge up to the current thumb position) in Chromium-based browsers and Safari, as they do not support ::-moz-range-progress.
If you only need Firefox or are happy without the fill effect, pure CSS is sufficient.
How do I add a box shadow to a range slider thumb?
Apply box-shadow directly to the thumb pseudo-element just as you would on any block element:
input[type="range"]::-webkit-slider-thumb { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
input[type="range"]::-moz-range-thumb { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
Box shadows on range thumbs are well supported across modern browsers once appearance: none has been applied.
What CSS pseudo-elements are used to style input range sliders?
The key pseudo-elements are: ::-webkit-slider-thumb and ::-webkit-slider-runnable-track for the thumb and track in Chrome, Edge, and Safari; ::-moz-range-thumb and ::-moz-range-track for Firefox; and ::-moz-range-progress for the filled portion of the track in Firefox only.
These are not part of a formal CSS standard, which is why they require vendor prefixes and why no single selector covers all browsers.