CODEWITHSUNDEEP
jqueryjquery-uislider
Evik James
Evik James

Reputation: 10503

How to display multiple handles in jQuery slider using range?

I am using jQuery 1.8.2 and jQuery UI 1.9.1. This is my first try using the slider.

I am trying to get four sliders working on the same page. The first handle shows up just fine but I can't get the second handle to show up.

You can see the full file here http://dev.iqcatalogs.com/avcat/myiq/test-16.cfm

What am I doing wrong?

<style>
#SliderWrapper {
    height: 200px;
    width: 200px;
}
.Slider {
    width: 150px;
    margin: 25px;
    float: left;
} 
.Label {
    width: 150px;
    float: left;
} 
</style>    

<div id="SliderWrapper">
<div class='Label'></div>
<div class="Slider" data-min='20' data-max='30'></div>
<div class='Label'></div>
<div class="Slider" data-min='30' data-max='40'></div>
<div class='Label'></div>
<div class="Slider" data-min='50' data-max='70'></div>
<div class='Label'></div>
<div class="Slider" data-min='80' data-max='100'></div>
</div>

<script>

$(".Slider").slider().each(function() {

    // SET VARS
    var $this = $(this),
        RangeLow = $this.data("min"),
        RangeHigh = $this.data("max"),
        ValueMin = RangeLow * .75, 
        ValueMax = RangeHigh * 1.25,
        Message = 'from' + ValueMin + ' to ' + ValueMax;

    $this.prev('div').text(Message);

    $this.slider({
        range: true,
        min: ValueMin,
        max: ValueMax,
        values: [RangeLow, RangeHigh],
        orientation: "horizontal"
    });

});

</script>

Upvotes: 1

Views: 1180

Answers (1)

Darrrrrren
Darrrrrren

Reputation: 6088

Simply remove the .slider() from your .each() function.

Ie: $(".Slider").slider().each(function() {

Becomes $(".Slider").each(function() {

EDIT: here's a fiddle

The reason your initial code did not work was because you were calling slider() before each(). Calling slider() on your class added a default slider (single-handle) to your class and then iterated over the slider elements. This results in your each() block attempting to call a double-handle slider on the slider element, not your initially targeted class.

Upvotes: 2

Related Questions