CODEWITHSUNDEEP
jqueryjquery-uislideruislider
Maanstraat
Maanstraat

Reputation: 1251

jQuery UI multiple sliders with amount

I have setting up some sliders on 1 page but when you slide 1 slider the amount of all the sliders change...

How can i make a slider seperate from each other? And if it is not to mutch work how can i use a span instead of a inputfield for showing the amount?

JS:

$(".slider").each(function () {
    $(".slider-range").slider({
        range: true,
        min: 0,
        max: 100,
        values: [30, 60],
        slide: function (event, ui) {
            $(".amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
        }
    });
    $(".amount").val("$" + $(".slider-range").slider("values", 0) + 
                     " - $" + $(".slider-range").slider("values", 1));
});

HTML:

 <div class="slider">
      <b>Price range:</b>
      <input type="text" class="amount" />
      <div class="slider-range"></div> 
 </div>

Upvotes: 3

Views: 10799

Answers (2)

WTK
WTK

Reputation: 16971

Haven't tested it but I'm pretty sure it's an issue of not using any kind of scoping when finding ".slider-range" and ".amount" elements. The way you doing it, you're basically attaching handler for "slide" event for every ".amount" element X times (where X is a number of ".slider" elements on page).

My fix:

$(".slider").each(function () {
    // $this is a reference to .slider in current iteration of each
    var $this = $(this);
    // find any .slider-range element WITHIN scope of $this
    $(".slider-range", $this).slider({
        range: true,
        min: 0,
        max: 100,
        values: [30, 60],
        slide: function (event, ui) {
            // find any element with class .amount WITHIN scope of $this
            $(".amount", $this).val("$" + ui.values[0] + " - $" + ui.values[1]);
        }
    });
    $(".amount").val("$" + $(".slider-range").slider("values", 0) + " - $" + $(".slider-range").slider("values", 1));
});

EDIT: I forgot to put var before declaring $this variable. I've tested it and now it looks alright :)

Upvotes: 6

Jules
Jules

Reputation: 7223

You are using .amount as a class every time for your <input /> element. Because classes are usually not unique it takes all <input /> elements with that class and changes its value. So you should indicate that it should look for the span with the amount class INSIDE your current container (use the .find() method. (Or you could make use of an unique id for each slider.)

So if you want to use the same HTML over and over you could simply do:

$(document).ready(function() {
    $(".slider").each(function() {
        // $this is a reference to .slider in current iteration of each
        $this = $(this);
        // find any .slider-range element WITHIN scope of $this
        $(".slider-range", $this).slider({
            range: true,
            min: 0,
            max: 100,
            values: [ 30, 60 ],
            slide: function( event, ui ) {
               // find any element with class .amount WITHIN scope of $this
               $(this).parent().find(".amount").html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]);
            }
        });
        $(".amount").html( "$" + $(".slider-range").slider("values", 0 ) + " - $" + $(".slider-range").slider("values", 1 ));
    });
});

You should thus also change your HTML and add the span:

<div class="slider">
      <b>Price range:</b>
      <span class="amount">0</span>
      <div class="slider-range"></div> 
</div>

<div class="slider">
      <b>Amount range:</b>
      <span class="amount">0</span>
      <div class="slider-range"></div> 
</div>

Note that I changed the val() to html() in your JQuery script in order to fill the span content. You can read more about the html() functionality here.

A full working example of this code can be found here on JSFiddle. This should solve your problem!

Upvotes: 3

Related Questions