修改jQuery ui滑块。最小/最大（正/负）均来自中间

Question

我使用jQuery插件UI Slider - https://jqueryui.com/slider/ 我需要一些帮助才能将其修改为此视图

当手柄从中心移动到最大值或最小值时，手柄应该是单一的并且范围蓝线应该出现 我找不到任何解决方案。 :(任何人都可以帮我这个吗？

UPD： 我只需要一个带有一个手柄的滑块，它将从中间开始，应该向右或向左滑动。

Answer 1

检查以下示例，

＆＃13;

＆＃13;

$(".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>');;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;