jquery - 修改 jQuery ui slider 。最小值/最大值(正/负)均从中间开始

Question

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

handle 应该是单一的，当 handle 从中心移动到最大值或最小值时，应该出现范围蓝线我找不到任何解决方案。 :( 谁能帮我解决这个问题吗？

更新:我只需要一个带有一个 handle 的 slider ，该 slider 从中间开始，应该向右或向左滑动。

Answer 1

检查下面的示例，

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