- Home
- Style Input Range
This is a handy generator that will help you style the html input range tag. You will be able to style all aspects of the input range tag and see the changes in the preview box below. Once you are happy with the style, simply copy and paste the generated css code into your project. If you need a bit of help to style the input tag, just select from one of our preset designs to get you started.
Style Input Range Preview
Thumb Properties
Thumb Color
Thumb Height: 30px
Thumb Width: 15px
Thumb Radius: 5px
Color
Thumb Border Width: 1px
Shadow Color
Thumb Shadow Size: 1px
Thumb Shadow Blur: 1px
Track Color
Track Height: 10px
Track Radius: 5px
Track Border Color
Track Border Width: 1px
Track Shadow Color
Track Shadow Size: 1px
Track Shadow Blur: 1px
Presets
Click on the thumb to update input range style.
If you have a great design you would like to share, please contact us.
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL
To style the range input with CSS you’ll need to apply styles to two pseudo-elements: ::-webkit-slider-thumb and ::-webkit-slider-runnable-track. Find out how you can apply custom styling and make the range input more functional and appealing.
Contents of the article:
- CSS selectors for the range input
- Improving usability
- A sprinkle of JavaScript
- Demo
The input element with a type of range is a native HTML form UI element that allows users to select a value by dragging a slider over a range field.
The default browser styling for this element is very basic and doesn’t provide enough information to the user which might confuse one. Also, the appearance of the range input element is different across browsers.
Range input HTML:
Range input appearance on different browsers:
Luckily there are ways you can improve that using nothing but native CSS and JavaScript.
CSS selectors for the range input
The range input widget consists of two parts the thumb and the track. Each one of these parts has its own pseudo-class selector for styling with a vendor suffix for cross-browser support.
Thumb:
input[type=”range”]::-webkit-slider-thumb
input[type=”range”]::-moz-range-thumb
input[type=”range”]::-ms-thumb
Track:
input[type=”range”]::-webkit-slider-runnable-track
input[type=”range”]::-moz-range-track
input[type=”range”]::-ms-track
input[type="range"] { -webkit-appearance: none; margin-right: 15px; width: 200px; height: 7px; background: rgba(255, 255, 255, 0.6); border-radius: 5px; background-image: linear-gradient(#ff4500, #ff4500); background-size: 70% 100%; background-repeat: no-repeat; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; }
To indicate the selected value, we can add a color from the start of the track up until the thumb. To do that we can use the background-image property with the linear-gradient() value. The background-size property will be used to set the size, which can later be updated with JavaScript.
Improving usability
The default range input doesn’t specify any values selected. Which makes it hard for users to understand what value is currently selected.
While the hash marks and labels on the range input are a great way to aid users visually, this feature is yet to become available.
However, there are a few ways you can improve that with some additional HTML and JavaScript:
- Specify the output element to display the selected value
- Specify the number input that is synced to the range input
Specify the output element to display the selected value
The output element on the side of the range input will display the selected value. You’ll have to add an id attribute for the output element, and an oninput attribute for the range input with a short function as a value, that will update the output element contents.
<input type="range" min="0" max="100" oninput="rangevalue.value=value"/> <output id="rangevalue">50</output>
Specify the number input that is synced to the range input
To take it a step further you can add a number input next to the range element.
That way the user will see the selected value and will have an option to modify it via the number input, which can be a better experience especially for mobile users.
<input type="range" value="50" min="0" max="100" id="range" oninput="rangevalue.value=value"/> <input type="number" id="rangevalue" value="50" oninput="range.value=value">
A sprinkle of JavaScript
To finalize we’ll need some JavaScript code to make it all work. The oninput attribute is already updating value based on a target element.
But to update the selected area of the range input we need to calculate the ratio and apply that value to the input background-size property.
const rangeInputs = document.querySelectorAll('input[type="range"]') const numberInput = document.querySelector('input[type="number"]') function handleInputChange(e) { let target = e.target if (e.target.type !== 'range') { target = document.getElementById('range') } const min = target.min const max = target.max const val = target.value target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%' } rangeInputs.forEach(input => { input.addEventListener('input', handleInputChange) }) numberInput.addEventListener('input', handleInputChange)
Custom range input Demo
Full example with all the code can be seen on CodePen:
See the Pen Range Input with values (Pure HTML, CSS, JS) by Tippingpoint Dev (@tippingpointdev) on CodePen.