只有一个带有 JQuery 范围滑块的句柄答案

【问题标题】：Only one handle with JQuery range slider只有一个带有 JQuery 范围滑块的句柄
【发布时间】：2012-09-10 21:29:46
【问题描述】：

我尝试使用 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]

之后它看起来：

【问题讨论】：

可能值得将 coffescript 粘贴到 coffecript 站点上的“try coffescript”窗口中，以查看它输出的 js。我知道有时缩进会有点烦人。但是，我会这样调用滑块： $('#slider-diameter').slider({ options/settings object })

标签： jquery html css jquery-ui coffeescript

【解决方案1】：

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

值数字

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

和also:

值数组

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

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

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

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

【讨论】：

@ThreeFingerMark：界面也有点笨，所以不要难过。 value 和 values 都没有充分的理由，甚至还有 $.isArray，所以他们没有理由不能只使用 value 并使用数组做正确的事情。