Welcome to today’s tutorial. Today we will learn how to style an input range slider. Using range sliders is very common, especially on an e-commerce website. However, we need to style these sliders to suit the look of our website. And well, that’s the most complicated part.
Unlike other components, styling sliders isn’t as easy as changing the background colour or adding a border-radius. It involves styling the slider thumb and the slider track. Also, we need these slider styles to have cross-browser support. In this tutorial, We will learn how to create a custom input range slider for your website.
But before we move forward, what is an input range slider? Range sliders are input elements that allow the user to choose a numeric value between a certain range. These elements have a minimum value and a maximum value. Input sliders also have a step attribute.
This step decides the amount by which the value of the slider is increased or decreased when the user moves the slider. This step attribute can even have a decimal value. The slider input has a value attribute. The value attribute sets the default value of the range slider.
There are two kinds of range sliders. First is the single thumb slider and the other is the dual thumb slider. The single one, as the name suggests has only one thumb and can be used to select only one value from the given range. On the other hand, for the dual thumb slider, there are two thumbs. This slider is used to select the minimum and maximum values from a given range.
I have a tutorial on creating and style dual input range sliders here. It is is a simple and easy to follow tutorial hence do check it out. Today we will learn how to style the single thumb input range slider. For this, we use HTML, CSS and vanilla Javascript.
Video tutorial:
I have a video tutorial on this, on my youtube channel. Check it out here below:
HTML:
We start with HTML code. Create an HTML file with the name – ‘index.html’. Copy the code provided below and paste it into your HTML file.
The HTML consists of a container that wraps the input range slider. The slider has an id of ‘my-slider’. We set the ‘min’ value to 0 and set the ‘max’ value to 100. We also set the default value to 50.
Next we add a div element with id – ‘slider-value’. This div displays the current value of the slider.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Range Slider</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="range" id="my-slider" min="0" max="100" value="50" oninput="slider()">
<div id="slider-value">0</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, We add custom styles with CSS. Create a CSS file called – ‘style.css’. Now, copy the code below and paste it into your stylesheet. The first here would be to hide the default appearance of the range slider. We use the ‘appearance’ property to achieve this. The ‘::-webkit-slider-runnable-track’ pseudo-element styles the slider track. On the other hand, ‘::-webkit-slider-thumb’ pseudo-element customizes the thumb.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #3264fe;
}
.container{
background-color: #ffffff;
width: 90vmin;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
position: absolute;
display: flex;
align-items: center;
justify-content: space-around;
padding: 30px 20px;
border-radius: 5px;
}
input[type="range"]{
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
display: block;
width: 80%;
height: 8px;
background-color: #d5d5d5;
border-radius: 8px;
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track{
-webkit-appearance: none;
height: 8px;
}
input[type="range"]::-moz-track{
-moz-appearance: none;
height: 8px;
}
input[type="range"]::-ms-track{
appearance: none;
height: 8px;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
height: 20px;
width: 20px;
background-color: #3264fe;
border-radius: 50%;
cursor: pointer;
margin-top: -6px;
border: none;
}
input[type="range"]::-moz-range-thumb{
-webkit-appearance: none;
height: 20px;
width: 20px;
background-color: #3264fe;
border-radius: 50%;
cursor: pointer;
margin-top: -6px;
border: none;
}
input[type="range"]::-ms-thumb{
appearance: none;
height: 20px;
width: 20px;
background-color: #3264fe;
border-radius: 50%;
cursor: pointer;
margin-top: -6px;
border: none;
}
input[type="range"]:active::-webkit-slider-thumb{
background-color: #ffffff;
border: 3px solid #3264fe;
}
#slider-value{
width: 13%;
position: relative;
background-color: #3264fe;
color: #ffffff;
text-align: center;
font-family: "Roboto Mono",monospace;
padding: 10px 0;
border-radius: 5px;
}
Javascript:
We add functionality to this slider using javascript. Create a javascript file – “script.js”. Copy the code is provided below. On input, the ‘slider’ function is called. It displays the value of the range slider in ‘my-slider’ div. It also converts the slider value into a percentage. This percentage value is used along with a linear gradient to highlight the slider fill.
const mySlider = document.getElementById("my-slider");
const sliderValue = document.getElementById("slider-value");
function slider(){
valPercent = (mySlider.value / mySlider.max)*100;
mySlider.style.background = `linear-gradient(to right, #3264fe ${valPercent}%, #d5d5d5 ${valPercent}%)`;
sliderValue.textContent = mySlider.value;
}
slider();
That’s it. Your custom input range slider is now ready. Do comment below your suggestions, doubts and queries. If you like this tutorial, be sure to subscribe to my youtube channel. I post short tutorials in form of carousels posts on my Instagram page. Follow me on Instagram for these quick tutorials. You can download the source code by clicking the button below.
If you put several range sliders on a single page and set track height to some small value, let’s say 3px, not all displayed tracks will have the same height. That’s true for Chrome, Firefox and IE11.
This seems some king of a strange general bug, since it affects also heights of div elements with the same height, displayed after range sliders.
Awesome!