1. Introduction
jquery-simple-range-slider is a simple and easy to use jQuery plugin for range sliders. The plugin offers min and maximum range, and you can customize the look using CSS styles.
2. Plugin Overview
Library | jquery-simple-range-slider |
Author | Malun |
Licence | MIT Licence |
Repository | GitHub |
Dependencies | jQuery 1.12.4 or Latest version |
3. How to install and use jquery-simple-range-slider jQuery plugin
Follow the below steps to install jquery-simple-range-slider jQuery plugin on your website.
3.1. Load jQuery library and jquery-simple-range-slider JS file into head tag of your HTML document:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- Range Slider Js -->
<script src="js/jquery.slider.js"></script>
3.2. Customize the CSS styles to your needs:
.slider-wrap {
position: relative;
height: 30px;
width: 80%;
margin: 10px auto;
padding-top: 10px;
}
.slider-handler {
width: 10px;
height: 20px;
border-radius: 5px;
box-shadow: 1px 1px 9px #09c, -1px -1px 9px #09c;
background-color: #4df;
position: absolute;
left: 0;
top: 5px;
}
.slider-range {
background-color: #4df;
border-radius: 5px;
height: 10px;
}
.tt {
width: 400px;
}
3.3. Create DIV element with unique id:
<div class="range"></div>
3.4. Initialize the plugin in document ready function:
$(function () {
$('.range').slider({
val: 0,
min: 0,
max: 100,
onChange: function(e, val) {
$(this).next('span').text(val);
},
onLoad: function(e, val) {
$(this).next('span').text(val);
}
});
setTimeout(()=>{
$('.tt').slider('setVal', 18);
}, 1000)
});
4. Conclusion
In this article, we presented jquery-simple-range-slider jQuery plugin for creating simple range sliders. The slider component is widely used by developers to filter results by the specific numeric parameter like for example price. jquery-simple-range-slider is simple to install and can be adapted to any website using custom CSS styles.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}