我正在尝试结合两个示例来制作一个带有显示其值的自定义 handle 的垂直 slider 。
https://jqueryui.com/slider/#custom-handle
https://jqueryui.com/slider/#slider-vertical
通过选择具有 css 类的 slider ,我能够让 slider 移动并更新裸垂直 slider 示例上的值,但这对我不起作用,因为页面上将有许多 slider 。
关于如何让这个 slider 正常工作有什么建议吗?
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;
}
最佳答案
从 CSS 标记中删除“top: 50%”行。在垂直方向上, slider 代码正在更改“bottom”参数,但在设置“top”参数时没有任何效果。
关于javascript - 带有自定义 handle 的 jquery ui 垂直 slider 。 handle 不会动。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44710324/