JQuery UI slider setting multiple input values

Question

I am trying to get multiple values to change while sliding the JQuery UI slider. Basically changing 3 different values based on the slider's number. In this case I'm using a range of $100,000 to $2,000,000. Then I want to calculate 3 different values depending on the position of the slider.
For the first value I want to get 6% - (2.7%+ $2799). The second value would be 6% - $5299. And the third value would be 6% - $3799 This is what I have so far:

<div id="slider">
<div id="slider-min">$100,000</div>
<div id="slider-max">$2,000,000</div>
</div>
<input id="amount" readonly type="text">
<div class="options-wrap">
<input id="result1" readonly type="text">
<input id="result2" readonly type="text">
<input id="result3" readonly type="text">
</div>

JS

$(function() {
$( "#slider" ).slider({
  range: 'min',
  value: 100000,
  min: 100000,
  max: 2000000,
slide: function( event, ui ) {
   $( "#amount" ).val( "$" + addCommas(ui.value.toString()));
  }
});
$('#amount')
.val( "$" + addCommas($("#slider").slider("value")));
///  Need to add a function(s) that would change the values of
///  the following selectors $('#result1'),$('result2') and $('result3')
///  based on the position of the slider with the calculation stated above.
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
});

I have tried different ways to get those 3 values to change while sliding the slider, but I've frustratingly failed on every attempt. I gotta admit I'm no expert and I greatly respect those who have better knowledge on this field. Any help would be immensely appreciated.

Mat Forsberg · Accepted Answer · 2015-03-05 02:57:20Z

1

JQUERY:

$(function () {
$("#slider").slider({
    range: 'min',
    value: 100000,
    min: 100000,
    max: 2000000,
    slide: function (event, ui) {
        $("#amount").val("$" + addCommas(ui.value));
        $("#result1").val("$" + addCommas(Math.round(ui.value*.06 - (.027+ 2799))));
        $("#result2").val("$" + addCommas(Math.round(ui.value*.06 -5299)));
        $("#result3").val("$" + addCommas(Math.round(ui.value*.06 -3799)));
    }
});
$('#amount')
    .val("$" + addCommas($("#slider").slider("value")));
///  Need to add a function(s) that would change the values of
///  the following selectors $('#result1'),$('result2') and $('result3')
///  based on the position of the slider with the calculation stated above.
function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

});

Research: http://jsfiddle.net/eqnLc9fg/1/

answered Mar 5, 2015 at 2:57

Mat Forsberg

4542 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2573774 Over a year ago

You're a life saver. You surely made my day. Thank you :) +1

Collectives™ on Stack Overflow

JQuery UI slider setting multiple input values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related