Multiple handle range slider using limitslider

jQueryUi’s Slider can be used for creating a  range slider with multiple handle.
But one of the problem of jQueryUi slider I faced is the crossing of slider handle. I tried using many slider plugins till I found the solution using Limitslider, an extension of jQuery UI slider itself created by Martijn van der Lee – https://github.com/vanderlee/limitslider.

The below features of limitslider really helped me

  • Allows or blocks crossing of sliders.
  • Minimum distance between sliders.
  • Label on the sliders.
  • Use all of jQueryUI’s slider functionality.

 

Limit slider jquery ui example

Including required stylesheet and scripts
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.limitslider.js"></script>
Html element on which limitslider is initialized
 <div class="example-basic"></div>
Initializing Limitslider

$('.example-basic').limitslider({
values: [ 1,5,15,20 ] ,
max: 30,
gap: 1,
label:function(position, handle){
return '<span>'+ (position) +'</span>Handle ' + (handle+1);
},
stop:function(event, ui){
$('#values').val(ui.values.join(","));
},
slide:function(event, ui){
// for making first handle not movable
if(ui.handleIndex==0)
{
alert('Cannot move this handle');
return false;
}
}
});
Styling handle bar and label

.example-basic{
margin: 30px 0px;
}
.ui-slider-horizontal > span > div
{
position: absolute;
top: 30px;
color: #000 !important;
width: 50px;
left: -14px;
background: #f7f7f7;
border: 1px solid #ccc;
border-radius: 5px;
padding: 3px;
}
.ui-slider-horizontal > span > div::before
{
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #cccccc;
position: absolute;
top: -6px;
left: 18px;
}
.ui-slider-horizontal > span > div > span
{
position: absolute;
top: -58px;
color: #000 !important;
left: 15px;
background: #f7f7f7;
padding: 3px;
}
.ui-slider-horizontal > span {
outline: none !important;
}

Download

Leave a Reply

Your email address will not be published. Required fields are marked *