Can you imagine the burden of increasing your computer volume with a dropdown selection box? How about inputting text or numbers to leave a review instead of clicking on your star rating? I am sure you can imagine how much more inconvenient it would be compared to using the range slider you normally have access to.
Among many of the new form elements introduced with HTML5, the range slider is one of the most commonly used. Previously, you would need JavaScript to create a simple slider. Lucky for us, you can create it only using HTML. In this post, we will cover how to custom and style an HTML slider with the visual appeal of CSS.
What is a range slider in HTML?
A range slider is an input where you select a value from a control or sliding bar. We can slide the handlebar to the right or left to produce a range. You can usually find a slider bar when manipulating your volume or brightness controls on the computer. The slider can have an icon on one end of the bar or icons on both ends of the bar to choose a specific range with the help of JavaScript. See the difference below:
The range slider is useful for the following conditions:
- You are aware of the upper and lower limit to the range.
- You need to have access to a wide range of numbers.
- You expect the user to adjust their input frequently (example: volume control).
We will begin by creating an HTML and CSS file. Let’s dive in.
Creating a Slider with HTML + CSS
HTML Slider Input
To begin, paste the following code into your coding environment of choice. For quick results, CodePen is a great option. The results show a basic slider that can adjust from 0 to 200.
<div class="slider">
<input type="range" min="0" max="200" value="100" oninput="rangeValue.innerText = this.value">
<p id="rangeValue">100</p>
</div>
HTML Breakdown
Now let’s break down this code:
- <div class=”slider”> – The class name “slider” is wrapping all the HTML code in this div for CSS styling purposes. We will call this class in our CSS file.
- <input type=”range”> – The “range” input type allows you to specify a numeric value which must be no less and no more than a given value. In our case, we will use the input to create a slider control. The default range is 0 to 100. You can set restrictions on accepted numbers using the attributes below.
- Common Attributes
- min – the minimum value allowed in the range. The default is 0.
- max – the maximum value allowed in the range. The default is 100.
- step – the legal number of intervals within the range. The default is 1.
- value – the default value or starting value once the page is loaded. The default value is halfway between the minimum and maximum number in most cases but you have the option to change it to whatever you like. In our example, once the page is loaded, the slider button should already be at 100.
- oninput=”rangeValue.innerText = this.value”> , <p id=”rangeValue”>10</p> – The range input doesn’t present a numerical readout of it’s value by default. Therefore, we assigned the variable “oninput“ to the rangeValue in order to view the range of numbers. The <p id> tag simply prints the numeric value on the screen.
CSS Slider Input
As you can see, a very basic slider can be created with only HTML. However, we may want to add a more positive visual impression to enhance the user’s experience. This can be done by pasting the following CSS code to your coding environment. The results will display a colored range slider with a border around it.
body {
background: linear-gradient(to right, red, yellow);
}
.slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 60px;
padding: 30px;
padding-left: 40px;
background: #fcfcfc;
border-radius: 20px;
display: flex;
align-items: center;
box-shadow: 0px 15px 40px #7E6D5766;
}
.slider p {
font-size: 26px;
font-weight: 600;
font-family: Open Sans;
padding-left: 30px;
color: black;
}
.slider input[type="range"] {
-webkit-appearance:none !important;
width: 420px;
height: 2px;
background: black;
border: none;
outline: none;
}
.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 30px;
height:30px;
background: black;
border: 2px solid black;
border-radius: 50%;
cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
background: black;
}
In the HTML code we created a class name “slider” and added CSS styling to everything within the class. Feel free to adjust the CSS code to your liking.
The Results
Great. You have now created a range slider and understand the inputs and attributes involved. Your results should look something like this:
More Slider Examples
If you would like to customize your slider further, take a look at these examples.
Creating a Range Slider With Tick Marks
Tick mark sliders are beneficial if you need a range slider with more precision. In this example, we will build a volume control. Take a look below.
HTML:
<div class="slider">
<label for="fader">Volume </label>
<input type="range" min="0" max="100" value="50" id="fader"
step="20" list="volsettings">
<datalist id="volsettings">
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist>
</div>
CSS:
body {
background: white);
}
.slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 60px;
padding: 30px;
padding-left: 40px;
background: #fcfcfc;
border-radius: 20px;
display: flex;
align-items: center;
box-shadow: 0px 15px 40px #7E6D5766;
}
.slider label {
font-size: 24px;
font-weight: 400;
font-family: Open Sans;
padding-left: 10px;
color: black;
}
.slider input[type="range"] {
width: 420px;
height: 2px;
background: black;
border: none;
outline: none;
}
Results:
Creating a Vertical Range Slider
A vertical range slider is excellent for preserving space on your webpage. Take a look on how you can create a numeric vertical slider in the below example.
HTML:
<div class="range">
<input type="range" value="25" min="0" max="50" oninput="rangeValue.innerText = this.value">
<p id="rangeValue">25</p>
</div>
CSS:
.range input {
margin-top:10%;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(270deg);
};
Results:
Creating a Gradient Range Slider
You can add a gradient range slider for a more dynamic feel to your website. See the example gradient slider below.
HTML:
<input type="range" min="-100" max="0" value="0" class="range blue"/>
CSS:
body, html {
background-color: #1d1c25;
margin: 0;
padding: 0;
}
.range {
-webkit-appearance: none;
-moz-appearance: none;
position: absolute;
left: 50%;
top: 50%;
width: 200px;
margin-top: 10px;
transform: translate(-50%, -50%);
}
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: rgba(59,173,227,1);
background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
height: 2px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
-moz-appearance: none;
background: rgba(59,173,227,1);
background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
height: 2px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2px solid;
border-radius: 50%;
height: 25px;
width: 25px;
max-width: 80px;
position: relative;
bottom: 11px;
background-color: #1d1c25;
cursor: -webkit-grab;
-webkit-transition: border 1000ms ease;
transition: border 1000ms ease;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
border: 2px solid;
border-radius: 50%;
height: 25px;
width: 25px;
max-width: 80px;
position: relative;
bottom: 11px;
background-color: #1d1c25;
cursor: -moz-grab;
-moz-transition: border 1000ms ease;
transition: border 1000ms ease;
}
.range.blue::-webkit-slider-thumb {
border-color: rgb(59,173,227);
}
.range.ltpurple::-webkit-slider-thumb {
border-color: rgb(87,111,230);
}
.range.purple::-webkit-slider-thumb {
border-color: rgb(152,68,183);
}
.range.pink::-webkit-slider-thumb {
border-color: rgb(255,53,127);
}
.range.blue::-moz-range-thumb {
border-color: rgb(59,173,227);
}
.range.ltpurple::-moz-range-thumb {
border-color: rgb(87,111,230);
}
.range.purple::-moz-range-thumb {
border-color: rgb(152,68,183);
}
.range.pink::-moz-range-thumb {
border-color: rgb(255,53,127);
}
input[type=range]::-webkit-slider-thumb:active {
cursor: -webkit-grabbing;
}
input[type=range]::-moz-range-thumb:active {
cursor: -moz-grabbing;
}
Resources1× 0.5× 0.25×Rerun
Results:
Build Robust Applications with HTML Slider
Range sliders have an advantage over a simple input field when you need access to a wide range of numbers. This is because it can reduce the number of unnecessary errors due to inaccurate entries. There are many cases where you can use a range slider such as volume control, ratings, scores, weight limits, and the list goes on. Enjoy applying your own custom range slider styles to the awesome website you will build.
Originally published Jul 15, 2022 7:00:00 AM, updated July 15 2022
