CODEWITHSUNDEEP
javascriptjquery
ryanwilliams
ryanwilliams

Reputation: 115

JQuery UI Multiple Sliders, Multiple Handles, Moving Labels

I'm trying to combine a couple of JQuery slider techniques I've seen, but I can't seem to get all three working at the same time. I would like multiple sliders on the page, each with two handles, and the labels moving with each respective handle. I feel like I'm close in the fiddle below, but the values are jumping around from handle to handle as you select either the top or bottom one. Can anyone help me with this example? Thanks!

http://jsfiddle.net/9qwmX/729/

HTML:

<div class='slider' id='slider1'>
    <div class="slider-range"></div>
    <div class="min"></div>
    <div class="max"></div>
</div>
<div class='slider' id='slider2'>
    <div class="slider-range"></div>
    <div class="min"></div>
    <div class="max"></div>
</div>

Javascript

$(document).ready(function () {
$(".slider").each(function () {
    $this = $(this);

    $(".slider-range", $this).slider({
        values: [1000, 9000],
        min: 1000,
        max: 9000,
        step: 1,
        slide: function (event, ui) {
            var delay = function () {
                var handleIndex = $(ui.handle).data('index.uiSliderHandle');
                var label = handleIndex == 0 ? '.min' : '.max';
                $(label).html('$' + ui.value).position({
                    my: 'center top',
                    at: 'center bottom',
                    of: ui.handle,
                    offset: "0, 0"
                });
            };

            // wait for the ui.handle to set its position
            setTimeout(delay, 5);

        }
    });

    $this.children('.min').html('$' + $this.slider('values', 0)).position({
        my: 'center top',
        at: 'center bottom',
        of: $($this.eq(0)),
        offset: "0, 10"
    });

    $this.children('.max').html('$' + $this.slider('values', 1)).position({
        my: 'center top',
        at: 'center bottom',
        of: $('.slider a:eq(1)'),
        offset: "0, 10"
    });
});
});

Upvotes: 0

Views: 926

Answers (1)

sylar
sylar

Reputation: 376

Not an expert on sliders, but check this out. http://jsfiddle.net/9qwmX/730/

Problem is that when you do

var label = handleIndex == 0 ? '.min' : '.max';

it did not knew which min/max to pick and it was messing it up on ya.

var slider = $(ui.handle).closest('.slider');
var handleIndex = $(ui.handle).data('index.uiSliderHandle');
var label = handleIndex == 0 ? slider.find('.min') : slider.find('.max');

By doing above, it will know which min/max to grab and update.

Hope it helped

Upvotes: 1

Related Questions