I need some help with jQuery UI slider, I have set the initial value but I can't seem to find a way to display it when the page loads. I also need to be able to call both slider values to a function to do a calculation, then display it to the screen.

You can view my Fiddle test here > /

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;
  }

Thanks.

I need some help with jQuery UI slider, I have set the initial value but I can't seem to find a way to display it when the page loads. I also need to be able to call both slider values to a function to do a calculation, then display it to the screen.

You can view my Fiddle test here > http://jsfiddle/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;
  }

Thanks.

• javascript
• jquery
• uislider

Share Improve this question Follow asked Feb 14, 2013 at 6:53 grandpagohangrandpagohan 4111 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Add create event handlers to 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"));
    }
});

Add this to your ready 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"));

http://jsfiddle/samliew/cC3Qh/1/