I have this code:
HTML:
<div class="unit">
<div class="slider-group">
Budget:
<label id="2-h"></label>
</div>
<div id="slider-2-h"></div>
<input type="hidden" name="sliderBudget" id="sliderValue" value="">
</div>
JavaScript:
$(function() {
$( '#slider-2-h' ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( '#2-h' ).html( '€' + ui.values[ 0 ] + ' - €' + ui.values[ 1 ] );
},
change: function(event, ui) {
$('#sliderValue').attr('value', ui.value);
}
});
$( '#2-h' ).html('€' + $('#slider-2-h' ).slider( 'values', 0 ) +
' - €' + $( '#slider-2-h' ).slider( 'values', 1 ) );
});
But I have a range from - to, and only 1 input (hidden). I set now a secound input (hidden) but we can is send the secouund value to the input?
I set a secound:
change: function(event, ui){
$('#sliderValue').attr('value', ui.value);
}
with ui.value[1]
but it's not ok
The simple way to achieve your goal is having two input fields.
Add another input value with different name.
<input type="hidden" name="sliderBudget2" id="sliderValue2" value="">
And alter your change
event to set the new input value.
change: function(event, ui){
$('#sliderValue').attr('value', ui.value[0]);
$('#sliderValue2').attr('value', ui.value[1]);
}