0
私は2つの例を組み合わせて、その値を表示するカスタムハンドルを持つ垂直スライダーを作成しようとしています。jquery uiカスタムハンドル付きの垂直スライダ。ハンドルは移動しません。
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;
}