Range slider is an interface element that enables users to select a range of values within a specified range of values.
The slider can be used for various purposes like volume control, image brightness, or a range of date-picker.
With HTML5 and jQuery, creating a range slider is simple and interactive.
HTML5 Markup
The first step is to create the HTML markup of the range slider.
The HTML5 input type range is used to create a range slider.
The attributes like min, max, and step can be used to set the minimum and maximum values and the increment step.
The value attribute sets the default value of the slider.
The following is the HTML code for the range slider.
<input type="range" min="0" max="100" step="10" value="50">
jQuery
In order to make the range slider more interactive and user-friendly, we will use jQuery.
The following is the code for the jQuery function that initializes the range slider and adds the slide event.
$(document).ready(function() {
$("input[type='range']").on("input change", function() {
var value = $(this).val();
$(this).next().html(value);
});
});Styling the Range Slider
The range slider can be styled using CSS.
You can add a custom background color, add a thumb, and change the track color.
The following is an example of how to style the range slider using CSS.
input[type="range"] {
-webkit-appearance: none;
width: 100%;
margin: 10px 0;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type="range"]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type="range"]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1</code>
Conclusion
In conclusion, creating a range slider with HTML5 and jQuery is easy and straightforward.
With the HTML5 input type range and jQuery, you can create a range slider that is both functional and interactive.
The styling of the range slider can be customized with CSS to match your website’s design.
The range slider is a useful tool for collecting user input, and by using HTML5 and jQuery, you can create a range slider that is both user-friendly and visually appealing.
