Here, we will see how to style the input range tag with the datalist options. The below html snippet has the datalist options and it is connected to the input range tag. We can set the maximum and minimum range of value to the input tag. The css snippet helps to improve the style of the input range tag.
step 1: Follow the below snippet to create input range tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Input Range Style</h2>
<input type="range" min="1" max="5" value="1" step="1" required/>
<datalist>
<option value="1" label="<1"></option>
<option value="2" label="1-5"></option>
<option value="3" label="5-10"></option>
<option value="4" label="10-15"></option>
<option value="5" label="15+"></option>
</datalist>
</body>
</html> Step 2: Add the below stylesheet to the html file.
body{padding: 250px;}
datalist {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
option {
padding: 0;
font-weight: 400;
font-size: 14px;
color: #000000;
}
input[type=range] {
height: 6px;
-webkit-appearance: none;
margin: 10px 0;
width: 100%;border-radius: 50px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #0000FF;
background: #0000FF;
border-radius: 6px;
border: 1px solid #0000FF;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #333333;
border: 1px solid #333333;
height: 20px;
width: 20px;
border-radius: 50px;
background: #333333;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #0000FF;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #0000FF;
background: #0000FF;
border-radius: 6px;
border: 1px solid #0000FF;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #333333;
border: 1px solid #333333;
height: 20px;
width: 20px;
border-radius: 50px;
background: #333333;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #0000FF;
border: 1px solid #0000FF;
border-radius: 12px;
box-shadow: 1px 1px 1px #0000FF;
}
input[type=range]::-ms-fill-upper {
background: #FD6E76;
border: 1px solid #FD6E76;
border-radius: 12px;
box-shadow: 1px 1px 1px #0000FF;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 1px #333333;
border: 1px solid #333333;
height: 20px;
width: 20px;
border-radius: 50px;
background: #333333;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #0000FF;
}
input[type=range]:focus::-ms-fill-upper {
background: #0000FF;
} Output:
