Menu icon Foundation
Can I add several Range Sliders?

I'm trying to create a web app with 3 sliders. The problem that I'm having is when I change one value in the input it changes the values in the other inputs. Also when I type in the input field the range slide stop updating the value in the input field.

Anyway I can select individual data-sliders?

function doSum() {

var slider_value = $("#whatever1").attr('data-slider');
$("#sliderOutput1").attr('value',slider_value);
var amount = slider_value;

var slider_value2 = $("#whatever1").attr('data-slider');
$("#sliderOutput2").attr('value',slider_value2);
var years = slider_value2;
//var years = $("#sliderOutput2");


var apr = $("#sliderOutput3");

var payment = $("#payment");
var total = $("#total");
var totalinterest = $("#totalinterest");

var principal = parseFloat(amount);
var interest = parseFloat($(apr).val()) / 100 / 12;
var payments = parseFloat($(years).val()) * 12;

var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);

//console.log(monthly);
payment.text(monthly.toFixed(2));
total.text((monthly * payments).toFixed(2));
totalinterest.text(((monthly*payments)-principal).toFixed(2));
}


$(function(){ // DOM

  $("#btnPostJob").click(function(){
    doSum();
  });
  $("#whatever1").on('change.fndtn.slider', function(){
    doSum();
  });
  $("#sliderOutput5").keyup(function(){
    doSum();
  });
  $('[data-slider]').on('change.fndtn.slider', function(event){
    $( this ).attr('id');
    $( this ).attr('data-slider');

  });

}); // DOM */

 <div class="row">
        <h6 class="subheader">Loan Amount:</h6>
          <div class="small-10 medium-11 columns">
            <div id="whatever1" class="range-slider round" data-slider="50" data-options="display_selector: #sliderOutput1; start: 1; end: 1000000;">
              <span class="range-slider-handle" role="slider" tabindex="0" aria-valuenow aria-valuemin="1"></span>
              <span class="range-slider-active-segment"></span>
            </div>
          </div>
          <div class="small-4 large-2 columns right">
            <input id="sliderOutput1" value="300000" min="1" >
          </div>
        </div>

        <div class="row">
        <label>Years:</label>
          <div id="whatever2" class="range-slider round" data-slider="30" data-options="display_selector: .selector; start: 1; end: 60;">
            <span class="range-slider-handle" role="slider" tabindex="0" aria-valuenow aria-valuemin="1"></span>
            <span class="range-slider-active-segment"></span>
            <input id="sync1" type="hidden">
          </div>

          <div class="small-4 large-2 columns right">
            <input type="number" id="sliderOutput2" min="1" max="60" value="30" >
          </div>
        </div>

        <div class="row">

          <h6 class="subheader">Interest:</h6>
          <div id="whatever3" class="range-slider round " data-slider="val3" data-options="display_selector: .selector;">
            <span class="range-slider-handle" role="slider" tabindex="0" aria-valuenow="10" aria-valuemin="1" aria-valuemax="100"></span>
            <span class="range-slider-active-segment"></span>
            <input type="hidden">
          </div>


          <div class="small-4 large-2 columns right">
            <input type="number" min="0" max="100" value="10" step="0.1" id="sliderOutput3">
          </div>
        </div>


        <div class="row">
           <input type=button id="btnPostJob" class="button right" value="Calculate">
        </div>


        <div class="row">
          <label>Approximate Payments:</label>
        </div>

        <div class="row">
          <label>Monthly payment: $ <span id="payment"></span></label>
          <label>Total payment: $ <span id="total"></span></label>
          <label>Total interest: $ <span id="totalinterest"></span></label>
        </div>
            

         

range sliders

I'm trying to create a web app with 3 sliders. The problem that I'm having is when I change one value in the input it changes the values in the other inputs. Also when I type in the input field the range slide stop updating the value in the input field.

Anyway I can select individual data-sliders?

function doSum() {

var slider_value = $("#whatever1").attr('data-slider');
$("#sliderOutput1").attr('value',slider_value);
var amount = slider_value;

var slider_value2 = $("#whatever1").attr('data-slider');
$("#sliderOutput2").attr('value',slider_value2);
var years = slider_value2;
//var years = $("#sliderOutput2");


var apr = $("#sliderOutput3");

var payment = $("#payment");
var total = $("#total");
var totalinterest = $("#totalinterest");

var principal = parseFloat(amount);
var interest = parseFloat($(apr).val()) / 100 / 12;
var payments = parseFloat($(years).val()) * 12;

var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);

//console.log(monthly);
payment.text(monthly.toFixed(2));
total.text((monthly * payments).toFixed(2));
totalinterest.text(((monthly*payments)-principal).toFixed(2));
}


$(function(){ // DOM

  $("#btnPostJob").click(function(){
    doSum();
  });
  $("#whatever1").on('change.fndtn.slider', function(){
    doSum();
  });
  $("#sliderOutput5").keyup(function(){
    doSum();
  });
  $('[data-slider]').on('change.fndtn.slider', function(event){
    $( this ).attr('id');
    $( this ).attr('data-slider');

  });

}); // DOM */

 <div class="row">
        <h6 class="subheader">Loan Amount:</h6>
          <div class="small-10 medium-11 columns">
            <div id="whatever1" class="range-slider round" data-slider="50" data-options="display_selector: #sliderOutput1; start: 1; end: 1000000;">
              <span class="range-slider-handle" role="slider" tabindex="0" aria-valuenow aria-valuemin="1"></span>
              <span class="range-slider-active-segment"></span>
            </div>
          </div>
          <div class="small-4 large-2 columns right">
            <input id="sliderOutput1" value="300000" min="1" >
          </div>
        </div>

        <div class="row">
        <label>Years:</label>
          <div id="whatever2" class="range-slider round" data-slider="30" data-options="display_selector: .selector; start: 1; end: 60;">
            <span class="range-slider-handle" role="slider" tabindex="0" aria-valuenow aria-valuemin="1"></span>
            <span class="range-slider-active-segment"></span>
            <input id="sync1" type="hidden">
          </div>

          <div class="small-4 large-2 columns right">
            <input type="number" id="sliderOutput2" min="1" max="60" value="30" >
          </div>
        </div>

        <div class="row">

          <h6 class="subheader">Interest:</h6>
          <div id="whatever3" class="range-slider round " data-slider="val3" data-options="display_selector: .selector;">
            <span class="range-slider-handle" role="slider" tabindex="0" aria-valuenow="10" aria-valuemin="1" aria-valuemax="100"></span>
            <span class="range-slider-active-segment"></span>
            <input type="hidden">
          </div>


          <div class="small-4 large-2 columns right">
            <input type="number" min="0" max="100" value="10" step="0.1" id="sliderOutput3">
          </div>
        </div>


        <div class="row">
           <input type=button id="btnPostJob" class="button right" value="Calculate">
        </div>


        <div class="row">
          <label>Approximate Payments:</label>
        </div>

        <div class="row">
          <label>Monthly payment: $ <span id="payment"></span></label>
          <label>Total payment: $ <span id="total"></span></label>
          <label>Total interest: $ <span id="totalinterest"></span></label>
        </div>
            

         
Donn Hill about 5 years ago

In
```Javascript
var slider_value2 = $("#whatever1").attr('data-slider');

Should it be 

```Javascript 
var slider_value2 = $("#whatever2").attr('data-slider');