Foundation 5 Range滑块问题

Question

Hey i've been trying out some things with the range sliders in Foundation 5. I'm trying to assign the sum of the range sliders to another range slider but it doesn't look right. New to this framework so i'm a little confused. Heres the jsfiddle: http://jsfiddle.net/Ae5Y4/7/

HTML:

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

        <div class="range-slider" id="slider1" 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" id="sum" />

        <div id="myResults"></div>
        <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>
   </div>

Javascript:

 $(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);

Answer 1

It's broken because you broke it by replacing range-slider class with the the range-slider-total . Just use different selector in the js and return old class.