Question

i try to implement a slider on my site with jQuery Slider. The ‘normal’ slider works fine but at the range slider the max handle is missing.

The 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>

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

And the 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]

After that it looks:

Answer 1

You need to use values not value if you want to supply both values for a range slider. From the fine manual:

value Number

Determines the value of the slider, if there’s only one handle. If there is more than one handle, determines the value of the first handle.

and also:

values Array

This option can be used to specify multiple handles. If range is set to true, the length of ‘values’ should be 2.

The problem is that you’re using value with an array but it is expecting a number. You should be saying:

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

For example: http://jsfiddle.net/ambiguous/PrHyV/