JQuery UI Slider - using default value in function
I need help with the jQuery UI slider, I have set an initial value, but I cannot find a way to display it on page load. I also need to be able to call both values ββof the slider to execute the function and then display it on the screen.
You can have a look at my Fiddle test here> http://jsfiddle.net/cC3Qh/
JQuery
$(function() {
$( "#slider1").slider({
max: 2500,
value: 1000,
slide: function( event, ui ) { $( "#slider-result1" ).html( ui.value ); },
change: function(event, ui) { calPrice(ui.value); }
});
$( "#slider2").slider({
max: 30,
value: 12,
slide: function( event, ui ) { $( "#slider-result2" ).html( ui.value ); },
change: function(event, ui) { calDays(ui.value); }
});
});
function calDays(sliderval){
var day = sliderval;
day = day * 100;
document.getElementById('price2').innerHTML = day;
var price = document.getElementById('price1').innerHTML;
price = price * day;
document.getElementById('price3').innerHTML = price;
}
function calPrice(sliderval){
var price = sliderval;
price = price * 100;
document.getElementById('price1').innerHTML = price;
}
Thank.
+3
source to share
2 answers
Add create
event handlers to the sliders:
$("#slider1").slider({
max: 2500,
value: 1000,
slide: function (event, ui) {
$("#slider-result1").html(ui.value);
},
change: function (event, ui) {
calPrice(ui.value);
},
create: function (event, ui) {
$("#slider-result1").html($(this).slider("value"));
}
});
+3
source to share
Add this to your finished function:
// display slider value on load
$("#slider-result1").html($("#slider1").slider("value"));
$("#slider-result2").html($("#slider2").slider("value"));
// perform calculations on load
calPrice($("#slider1").slider("value"));
calDays($("#slider2").slider("value"));
+3
source to share