I have integrated the jQueryUI slider into my project and need to show the minimum and maximum values of the slider in two separate div elements. These divs should update as the user interacts with the slider, and also display the initial values of the slider.
Issue: Initially, the div displays [object object] as the values, but it updates correctly when the slider is adjusted. I am seeking assistance to ensure that the initial values are displayed properly.
jQuery Code:
$("#filter_submenu_rent").slider({
range: true,
min: 0,
max: 10000,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
$( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
}
})
$( "#rent_min" ).html( "Min: $" + $( "#slider_rent" ).slider( "values", 0 ));
$( "#rent_max" ).html( "Max: $" + $( "#slider_rent" ).slider( "values", 1 ));
HTML Code
<div id="filter_submenu_rent">
<div id="rent_min"></div>
<div id="slider_rent"></div>
<div id="rent_max"></div>
</div>
jQuery Code (Another Attempt) When this code block is used, nothing appears in the 2 divs initially
$("#filter_submenu_rent").slider({
range: true,
min: 0,
max: 10000,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
$( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
},
create: function(event, ui) {
$( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
$( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
}
})