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％”这一行。在垂直方向上，滑块代码正在改变“底部”参数，但在设置“顶部”参数时不起作用。