只有一个带有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

如果要为范围滑块提供两个值，则需要使用values而不是value。来自fine manual：

  

值数字

     

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

和also：

  

值数组

     

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

问题是你正在使用带有数组的value，但它期待一个数字。你应该说：

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

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