0

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]

その後、次のようになります。 ここに画像の説明を入力

4

1 に答える 1

1

レンジ スライダーに両方の値を指定する場合は、 valuesnotを使用する必要があります。細かいマニュアルvalueから：

値番号

ハンドルが 1 つしかない場合、スライダーの値を決定します。ハンドルが複数ある場合は、最初のハンドルの値を決定します。

また：_

値配列

このオプションは、複数のハンドルを指定するために使用できます。範囲が true に設定されている場合、「値」の長さは 2 にする必要があります。

問題はvalue、配列で使用しているが、数値が期待されていることです。あなたは言うべきです：

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

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

于 2012-09-18T17:13:27.503 に答える