Я использую плагин jQuery UI Slider - https://jqueryui.com/slider/ И мне нужна помощь с изменением его в этот вид
Ручка должна быть одиночной, а синяя линия диапазона должна появляться, когда ручка перемещается от центра к максимальным или минимальным значениям. Я не могу найти для этого никакого решения. :( Кто-нибудь может мне с этим помочь?
UPD: мне нужен только один слайдер с одной ручкой, которая будет начинаться посередине и должна скользить вправо или влево.
Посмотрите пример ниже,
$(".slider").slider({
value: 0,
min: -5,
max: 5,
create : function() {
var value=$(".slider").slider( "value" );
$("#amount").val((value > '0') ? ('+'+ value) : value);
},
slide: function (event, ui) {
var value = Math.abs(ui.value);
var percentage = (value/5)*100;
if(ui.value>0){
$('#blue_bar .min span').css('width',percentage+'%');
$('#blue_bar .max span').css('width','0%');
}
if(ui.value<0){
$('#blue_bar .max span').css('width',percentage+'%');
$('#blue_bar .min span').css('width','0%');
}
if(ui.value==0){
$('#blue_bar .max span').css('width','0%');
$('#blue_bar .min span').css('width','0%');
}
}
}).append('<div id="blue_bar" style="width: 100%"><div class="min"><span></span></div><div class="max"><span></span></div></div>');;#blue_bar {
float: right;
height: 100%;
border-radius: 0 4px 4px 0;
}
#blue_bar div{
width: 50%;
height: 100%;
float:right;
}
#blue_bar .min span{
background-color: blue;
width: 0%;
height: 100%;
float:left;
}
#blue_bar .max span{
background-color: blue;
width: 0%;
height: 100%;
float:right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="slider"></div>