How to include two vertical sliders on same page
I am using the vertical slider by JQuery UI in Symfony, but the problem is i cant seem to get the .val() function to perform correctly, the code is as follows:
<script>
$(function() {
$( "#slider-range-price" ).slider({
orientation: "vertical",
range: true,
values: [ 0, 50 ],
slide: function( event, ui ) {
$( "#search_price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#search_price" ).val( "$" + $( "#slider-range-price" ).slider( "values", 0 ) +
" - $" + $( "#slider-range-price" ).slider( "values", 1 ) );
$( "#slider-range-discount" ).slider({
orientation: "vertical",
range: "max",
min:0,
max:100,
value:0,
slide: function( event, ui ) {
$( "#search_price" ).val(ui.values);
}
});
$( "#search_discount" ).val( $( "#slider-range-discount" ).slider( "value" ) );
});
</script>
<div id="form-price-container" style="position: relative;">
{{ form_label(form.price) }}
{{ form_widget(form.price) }} //id="search_price"
<div id="slider-range-container-price" >
<div id="slider-range-price" style="height:200px;"></div>
<img src="{{ asset('bundles/support-files/images/cross.jpg') }}" class="img-close" />
</div>
</div>
<div id="form-price-container" style="position: relative;">
{{ form_label(form.discount) }}
{{ form_widget(form.discount) }} ////id="search_discount"
<div id="slider-range-container-discount" >
<div id="slider-range-discount" style="height:200px;"></div>
<img src="{{ asset('bundles/support-files/images/cross.jpg') }}" class="img-close" />
</div>
</div>
So for the input with id="search_price", the vertical slider associated is of id="slider-range-price", when the slider values are changed, the input#search_price works fine and displays the modified value.
For the input with id="search_discount", the vertical slider associated is of id="slider-range-discount", here when the slider values are changed, the val function confuses the targeted input, it changes the value for input#search_price.
Can someone help me with this problem?