jquery ui與自定義句柄的垂直滑塊。手柄不會移動。

Question

我想結合兩個例子來製作一個垂直滑塊，並顯示其值的自定義句柄。

https://jqueryui.com/slider/#custom-handle

https://jqueryui.com/slider/#slider-vertical

我能得到滑塊移動，並通過選擇與CSS類滑塊更新裸垂直滑塊例如價值，但因爲這將不適合我我將在頁面上有許多滑塊。

有關如何讓這個滑塊正常工作的任何建議？

Codepen例如這裏：

https://codepen.io/cschroeder/pen/EXXqqv

JS：

$(function() { 
    var handle = $("#custom-handle"); 
    $("#slider-vertical").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 9, 
     value:0, 
     create: function() { 
     handle.text($(this).slider("value")); 
     }, 
     slide: function(event, ui) { 
     //$(".ui-slider-handle").text(ui.value); 
     handle.text(ui.value);     
     } 
    }); 

    }); 

HTML：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css"> 

<div id="slider-vertical" style="height:200px;"> 
<div id="custom-handle" class="ui-slider-handle"></div> 
</div> 

CSS：

#custom-handle { 
    width: 3em; 
    height: 1.6em; 
    top: 50%; 
    margin-top: -.8em; 
    text-align: center; 
    line-height: 1.6em; 
    } 

Answer 1

從CSS標記中刪除「top：50％」這一行。在垂直方向上，滑塊代碼正在改變「底部」參數，但在設置「頂部」參數時不起作用。