CODEWITHSUNDEEP
jqueryslider
Haribo83
Haribo83

Reputation: 165

jQuery Slider Giving Incorrect Value

I'm very new to using jQuery so please excuse me if this question is ridiculous.

I have a jQuery slider that displays the value currently selected, out of 100. I now need to get the remainder so I can use that in a calculation later on.

The code I have shows both values but percent2 is often 1 or 2 numbers either side of what should be displayed, so percent1 would show as 100 and percent2 would show as 2.

The code is:

<script type="text/javascript">
    $(function () {
        $("#percent_slider").slider({
            orientation: "horizontal",
            range: false,
            min: 0,
            max: 100,
            value: 50,
            step: 1,
            slide: function (event, ui) {
                $("#percent1").text(ui.value);
                var percent2 = 100 - ($("#percent_slider").slider("value"));
                $("#percent2").text(percent2.toFixed(0));
            },
        });
    });
</script>

Is this the best way to find the value I want?

Upvotes: 1

Views: 480

Answers (2)

David Thomas
David Thomas

Reputation: 253308

For some reason, and I genuinely have little idea why, this works:

slide: function( event, ui ) {
    var sliderVal = ui.value,
        percent2 = 100-sliderVal;
    $( "#percent1" )
        .text(sliderVal);
    $("#percent2" )
        .text(percent2);

    console.log(sliderVal, percent2, sliderVal + percent2);

JS Bin demo.

I'm assuming, though I'm not entirely sure, that there was a time-delay between repeated evaluations of the ui.value variable, throughout the function; assigning that value to a variable seems to cancelled out the delay, or minimised it at least.

Upvotes: 1

Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

maybe it's need to be prsed as a integer, seems this value is a string... use parseInt() like that:

   var percent2 = 100 - parseInt($("#percent_slider").slider("value"));

Upvotes: 0

Related Questions