修改 jQuery ui 滑块。 Min/max(positive/negative) 都从中间开始

Question

我使用 jQuery 插件 UI 滑块 - https://jqueryui.com/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>

修改 jQuery ui 滑块。 Min/max(positive/negative) 都从中间开始

Modify jQuery ui slider. Min/max(positive/negative) both range from middle

jquery

jquery-ui

uislider

jquery-ui-slider