Sum Value of Different Foundation Range Sliders

Question

I'm trying to add the value of 6 different range sliders and show the result. I get a number as i expected with this but i'm just trying to figure out how to sum each slider's attribute. So i would get a total of all when the button is pressed.

I created a jsfiddle but it doesnt work. See here: http://jsfiddle.net/Ae5Y4/3/

Any have any suggestions?

HTML:

<div class="row">
<div class="large-6 columns">

         <div class="range-slider" data-slider data-options="start: 1; end: 500; display_selector: #SliderOutput1;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"></div>
         <div id="SliderOutput1"></div>
        <div class="range-slider" data-slider data-options="start: 1; end: 250; display_selector: #SliderOutput2;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"> </div>
        <div id="SliderOutput2"></div>
        <div class="range-slider" data-slider data-options="start: 1; end: 200; display_selector: #SliderOutput3;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"> </div>
        <div id="SliderOutput3"></div>

</div>
<div class="large-6 columns">

        <div class="range-slider" data-slider data-options="start: 1; end: 500; display_selector: #SliderOutput4;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"> </div>
        <div id="SliderOutput4"></div>
        <div class="range-slider" data-slider data-options="start: 1; end: 500; display_selector: #SliderOutput5;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"> </div>
        <div id="SliderOutput5"></div>
        <div class="range-slider" data-slider data-options="start: 1; end: 200; display_selector: #SliderOutput6;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"></div>
        <div id="SliderOutput6"></div>


<br/><br/>

<input type="button" value="Sum" onclick="doMath();" />

<br/><br/>
<div id="myResults"></div>

JAVASCRIPT:

$(document).foundation();


function doMath()
{



    var my_input1 = $('.range-slider').attr('data-slider');
    var my_input2 = $('.range-slider').attr('data-slider');
    var my_input3 = $('.range-slider').attr('data-slider');
    var my_input4 = $('.range-slider').attr('data-slider');
    var my_input5 = $('.range-slider').attr('data-slider');
    var my_input6 = $('.range-slider').attr('data-slider');
    var sum = 0;

  // Add them together and display
    var sum = parseInt(my_input1) + parseInt(my_input2) + parseInt(my_input3) + parseInt(my_input4) + parseInt(my_input5) + parseInt(my_input6);
    document.getElementById('myResults').innerHTML = sum;


}

Nick Dickinson-Wilde · Answer 1 · 2014-05-08T15:36:41.143

onClick= is not the best - it can screw up mysteriously (and non-mysteriously but I just don't like it). Instead use the JQuery $(...).click(function); type of click monitoring.

Working Fiddle

Relevant Code:

HTML:

...snip...
<input type="button" value="sum" id="sum" />
...snip...

and Javascript (just append this at the end of your javascript - make sure it is onReady or similar before that runs):

$("#sum").click(doMath);

Also unrelated to that problem I notice bit of flaky code there; I'd suggest using the either ids rather than the class or loop through the class to get each member rather than just calling it six times to get the numbers. In fact I'd suggest you replace that whole javascript with:

$(document).foundation();


      function doMath()
    {
        var sum = 0;
        $('.range-slider').each(function() {
            sum += parseInt($(this).attr('data-slider'));
        });
        document.getElementById('myResults').innerHTML = sum;
    }
 $("#sum").click(doMath);

You'll actually get the correct sum then instead of 6*(value of first slider). Fiddle for this version.

score 0 · Answer 2 · answered May 16 '14 at 16:03

I'm new to this framework so things are a little confusing.

I've tried to create a slider to show the sum, i dont think i've done this correctly as the slider looks broken. I've modified your javascript a bit hoping to assign the sum to a slider. http://jsfiddle.net/Ae5Y4/7/

HTML:

<div class="range-slider-total" data-slider data-options="start: 1; end: 2250; display_selector: #SliderOutput7;"> <span class="range-slider-handle"></span> <span class="range-slider-active-segment"></span> <input type="hidden"></div>
        <div id="SliderOutput7"></div>

Javacript:

$(document).foundation();


  function doMath()
{
    var sum = 0;
    $('.range-slider').each(function() {
        sum += parseInt($(this).attr('data-slider'));
    });
    document.getElementById('myResults').innerHTML = sum;

    var new_value = sum;
    $('.range-slider-total').foundation('slider', 'set_value', new_value);
}
$("#sum").click(doMath);

Sum Value of Different Foundation Range Sliders

2 Answers2