CODEWITHSUNDEEP
jqueryeventssliderslide
Susan Sampi
Susan Sampi

Reputation: 73

jQuery Slider ID in the Slide Event?

I'm using multiple jquery sliders and I want to be able to use one function for the Slide event. I can't figure out how to get the ID of the slider that is calling the Slide event.

Here is how my code looks like http://jsfiddle.net/89dxM/8/.

Inside my SliderDisplay() function I need to find which slider is calling the function so I can update the text accordingly. Is that possible?

Thanks, Susan

Upvotes: 1

Views: 4523

Answers (2)

Torbjörn Nomell
Torbjörn Nomell

Reputation: 3010

You can find the input by id:

function SliderDisplay(event, ui) {
        var id = '#' + event.target.id.replace('slider','price');
        $(id).val("$" + ui.values[0] + " - $" + ui.values[1]);
    }

Upvotes: 0

Troy
Troy

Reputation: 5419

The callback function is called from the context of the slider being used, so you can use the 'this' variable to access it's id:

var id = $(this).attr("id");

In your linked test code, use the following:

function SliderDisplay(event, ui) {
    $("#price-Powergarage").val($(this).attr("id"));
}

To take your example app to its conclusion, add an additional attribute to each slider div like so:

Html

<label for="price-Powergarage">Garage Spaces:</label>
<input type="text" id="price-Powergarage"/>
<div id="slider-Powergarage" rel="#price-Powergarage"></div>

<label for="price-Powerdoor">Garage Doors:</label>
<input type="text" id="price-Powerdoor"/>
<div id="slider-Powerdoor" rel="#price-Powerdoor"></div>

Javascript

$("#slider-Powergarage").slider({
    range: true,
    min: 1,
    max: 10,
    values: [1, 10],
    step: 1,
    slide: SliderDisplay
});


$("#slider-Powerdoor").slider({
    range: true,
    min: 1,
    max: 10,
    values: [1, 10],
    step: 1,
    slide: SliderDisplay
});

function SliderDisplay(event, ui) {
    $($(this).attr("rel")).val("$" + ui.values[0] + " - $" + ui.values[1]);
}

Upvotes: 2

Related Questions