How to Create Range Slider With HTML5 and jQuery
Before the introduction of HTML5, we couldn’t even think about creating a range slider on a webpage. HTML5 introduced new attributes and features, including the range input type. The range input element allows you to create sliding controls for your site users.
In this tutorial, we will show you how with a little jQuery code, we can capture and respond to user interaction with the range slider control.
Here is a jQuery solution to display values for all range input elements:
$(function () {
$('.slider').on('input change', function () {
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function () {
let value = $(this).prev().attr('value');
$(this).html(value);
});
})Let’s see the code in action:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<h2>Range Slider</h2>
<p>
<label for="range_weight">Weight: </label>
<input type="range" name="weight" class="slider" min="0" max="100" value="60">
<span class="slider_label"></span>
</p>
<p>
<label for="range_weight">Height: </label>
<input type="range" name="height" class="slider" min="0" max="100" value="8">
<span class="slider_label"></span>
</p>
<p>
<label for="range_weight">Length: </label>
<input type="range" name="length" class="slider" min="0" max="100" value="30">
<span class="slider_label"></span>
</p>
<script>
$(function() {
$('.slider').on('input change', function() {
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function() {
let value = $(this).prev().attr('value');
$(this).html(value);
});
})
</script>
</body>
</html>Another example of range slider with negative and decimal values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<h2>Range Slider</h2>
<p>
<label for="range_weight">Negative: </label>
<input type="range" name="negative" class="slider" min="-25" max="25" value="-10">
<span class="slider_label"></span>
</p>
<p>
<label for="range_weight">Decimal: </label>
<input type="range" name="decimal" class="slider" min="0.001" max="2" value="0.08" step="0.001">
<span class="slider_label"></span>
</p>
<script>
$(function() {
$('.slider').on('input change', function() {
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function() {
let value = $(this).prev().attr('value');
$(this).html(value);
});
})
</script>
</body>
</html>Another example of price range slider with:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
<style>
.sliderId {
width: 500px;
margin: auto;
text-align: center;
position: relative;
height: 100px;
}
.sliderId svg,
.sliderId input[type=range] {
position: absolute;
left: 0;
bottom: 0;
}
input[type=number] {
border: 1px solid #ddd;
text-align: center;
font-size: 24px;
-moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number]:invalid,
input[type=number]:out-of-range {
border: 2px solid #e60023;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #1da1f2;
}
input[type=range]:focus::-ms-fill-lower {
background: #1da1f2;
}
input[type=range]:focus::-ms-fill-upper {
background: #1da1f2;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]::-moz-range-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
background: #1da1f2;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]::-ms-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #1da1f2;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="sliderId">
<span>from
<input type="number" value="1000" min="0" max="100000"/> to
<input type="number" value="10000" min="0" max="100000"/>
</span>
<input value="10000" min="0" max="100000" step="500" type="range" />
<input value="50000" min="0" max="100000" step="500" type="range" />
<svg width="100%" height="25">
<line x1="4" x2="520" stroke="#212121" stroke-width="20" stroke-dasharray="1 25"></line>
</svg>
</div>
<script>
(function() {
let parent = document.querySelector(".sliderId");
if(!parent) return;
let rangeSlide = parent.querySelectorAll("input[type=range]");
let numberSlide = parent.querySelectorAll("input[type=number]");
rangeSlide.forEach(function(el) {
el.oninput = function() {
let slide1 = parseFloat(rangeSlide[0].value);
let slide2 = parseFloat(rangeSlide[1].value);
if(slide1 > slide2) {
[slide1, slide2] = [slide2, slide1];
}
numberSlide[0].value = slide1;
numberSlide[1].value = slide2;
}
});
numberSlide.forEach(function(el) {
el.oninput = function() {
let number1 = parseFloat(numberSlide[0].value);
let number2 = parseFloat(numberSlide[1].value);
if(number1 > number2) {
let tmp = number1;
numberSlide[0].value = number2;
numberSlide[1].value = tmp;
}
rangeSlide[0].value = number1;
rangeSlide[1].value = number2;
}
});
})();
</script>
</body>
</html>The <input> type range elements let the user specify a numeric value being no less than a specified value, no more than another specified one. By default, the range is from 0 to 100. But you can restrict the numbers using max, min, step and value attributes.