Reputation: 73
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
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
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