CODEWITHSUNDEEP
jqueryjquery-uiuislider
jkun
jkun

Reputation: 1

How to add the values of two jquery slider UI then display it?

<script type="text/javascript">
 $(function(){
      $("#sliderOne").slider({
           range: "min",
           value: 1,
           min: 1,
           max: 10,

           slide: function (event, ui) {
                $("#paraOne").text(ui.value);
           }

      });


      $("#sliderTwo").slider({
           range: "min",
           value: 1,
           min: 1,
           max: 10, 
           slide: function (event, ui) {
                $("#paraTwo").text(ui.value);
           }
      });
 });

Upvotes: 0

Views: 968

Answers (1)

Mottie
Mottie

Reputation: 86433

Try this (demo):

$("#sliderOne").slider({
    range: "min",
    value: 1,
    min: 1,
    max: 10,
    slide: function(event, ui) {
        $("#paraOne").text(ui.value);
        $('#paraTotal').text(ui.value + $('#sliderTwo').slider("value"));
    }

});

$("#sliderTwo").slider({
    range: "min",
    value: 1,
    min: 1,
    max: 10,
    slide: function(event, ui) {
        $("#paraTwo").text(ui.value);
        $('#paraTotal').text(ui.value + $('#sliderOne').slider("value"));
    }
});

Upvotes: 2

Related Questions