jquery - 只有一个带有 JQuery 范围滑块的句柄

Question

我尝试使用 jQuery Slider 在我的网站上实现一个滑块。“正常”滑块工作正常，但在范围滑块处缺少最大手柄。

的HTML：

<dd id="search-diameter">
              <div class="variable-range">
                <span class="lower">7.5</span>
                <span class="upper">11.0</span>
                mm
                <div id="slider-diameter" class="slider"></div>
              </div>
    </dd>

CSS：

.slider {
margin-left: 0.6em;
margin-right: 0.6em;
}

.ui-slider.ui-slider-horizontal .ui-slider-handle {
background: url("sliders.png") no-repeat scroll center top transparent;
border: medium none;
cursor: pointer;
height: 20px;
margin: 0 0 3px -8px;
outline: medium none !important;
top: -6px;
width: 20px;
}

和 CoffeeScript：

$('#slider-diameter').slider
min: 7.5
max: 11.0
range: true
step: 0.1
value: [7.5, 11.0]
slide: (event, ui) ->
  $("#search-diameter .lower").text ui.values[0]
  $("#search-diameter .upper").text ui.values[1]

之后它看起来：

Answer 1

如果要为范围滑块提供两个值，则需要使用valuesnot 。value来自精美手册：

数值编号

如果只有一个手柄，则确定滑块的值。如果有多个句柄，则确定第一个句柄的值。

还有：_

值数组

此选项可用于指定多个句柄。如果 range 设置为 true，则“values”的长度应为 2。

问题是您使用value的是数组，但它需要一个数字。你应该说：

values: [7.5, 11.0]
# ---^

例如：http: //jsfiddle.net/ambiguous/PrHyV/