带有自定义句柄的 jquery ui 垂直滑块。手柄不动。答案

【问题标题】：jquery ui vertical slider with custom handle. Handle won't move.带有自定义句柄的 jquery ui 垂直滑块。手柄不动。
【发布时间】：2018-02-06 05:00:56
【问题描述】：

我正在尝试结合两个示例来制作一个带有自定义句柄的垂直滑块，以显示其值。

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;
  }

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

从您的 CSS 标记中删除“top: 50%”行。在垂直方向，滑块代码正在更改“底部”参数，但在设置“顶部”参数时不起作用。

【讨论】：