Menu icon Foundation
Sum Value of Different Range Sliders

Hey

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?
I've tried changing the div classes to be unique but that breaks the slider.

        <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>







    
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      
	  
	
	$(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;
		
		
    }
	
	


    </script>
    </div>
</div>

         

RangeSlider

Hey

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?
I've tried changing the div classes to be unique but that breaks the slider.

        <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>







    
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      
	  
	
	$(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;
		
		
    }
	
	


    </script>
    </div>
</div>

         

Luis almost 5 years ago

Have you ever solved this?