Reputation: 8637
In code below is function that converts slider class into slider control. It has function which is executed when "slide" event is raised.
$(function(){
$(".slider").slider({
value: 0,
min: 0,
max: 5,
step: 1,
slide: function(event, ui) {
$(".slideinput > input.slidevalue").val(ui.value);
}
});
});
This code is not working when I have multiple sliders on one page. (it is changing all of them) How can I fix it? I don't know how to set second element select statetment to select just element with unique id. (id is dynamically generated)
Some HTML to ilustrate positioning of the elements.
<div class="item">
<p class="head">
A kako biste općenito ocijenili sljedeće aspekte ljetne turističke ponude u Hrvatskoj: Kvaliteta smještaja?</p>
<div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;">
<div style="width: 200px;" class="slider">
</div>
<input class="slidevalue" id="q34" name="q34" type="hidden" value="0" />
</div>
</div>
<div class="item">
<p class="head">
Broj plaža?</p>
<div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;">
<div style="width: 200px;" class="slider">
</div>
<input class="slidevalue" id="q35" name="q35" type="hidden" value="0" />
</div>
</div>
<div class="item">
<p class="head">
Urednost plaža?</p>
<div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;">
<div style="width: 200px;" class="slider">
</div>
<input class="slidevalue" id="q36" name="q36" type="hidden" value="0" />
</div>
</div>
<div class="item">
<p class="head">
Kvaliteta restorana i kafića?</p>
<div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;">
<div style="width: 200px;" class="slider">
</div>
<input class="slidevalue" id="q37" name="q37" type="hidden" value="0" />
</div>
</div>
Any solution?
Upvotes: 0
Views: 152
Reputation: 106412
I'm not sure about the "slide" event - but most jQuery events will have this
set as the target element.
Have you tried doing a console.log(this);
(assuming firebug) to see what you have?
You might be able to do this:
Updated with comment:
It seems that your input element is a child of the "sliders" parent, not the slider, changed the code block to reflect yours.
slide: function(event, ui) {
$(this).parent().find("input.slidevalue").val(ui.value);
}
Upvotes: 3