Menu icon Foundation
Ranger Slider - pass var help

Hi guys,

I'm having a bit of trouble converting a loan calculator.

The code given to me is working, but since we are converting the site over into foundation, I felt I should also convert the calculator.

So here is the base HTML, I'm just showing what is important.

<div class="large-12 columns">
  <h2 class="subheader">I would like to borrow:</h2>
  <div class="calc"> $<span id="amt"></span>.00</div>
  <div class="range-slider radius" data-slider data-options="display_selector: #amt; start: 200; end: 1000; step: 25;"> <span class="range-slider-handle" role="slider" tabindex="0"></span> <span class="range-slider-active-segment"></span> </div>
  <ul class="small-block-grid-9 show-for-medium-up">
    <li>200</li>
    <li class="text-left">300</li>
    <li class="text-center">400</li>
    <li class="text-center">500</li>
    <li class="text-center">600</li>
    <li class="text-center">700</li>
    <li class="text-center">800</li>
    <li class="text-center">900</li>
    <li class="text-right">1000</li>
  </ul>
</div>
<div class="large-12 columns">
  <h2 class="subheader">I can pay back in:</h2>
  <div class="calc"><span id="term"></span> Months</div>
  <div class="range-slider radius" data-slider data-options="display_selector: #term; start: 2; end: 6;"> <span class="range-slider-handle" role="slider" tabindex="0"></span> <span class="range-slider-active-segment"></span> </div>
  <ul class="small-block-grid-5 show-for-medium-up">
    <li class="text-left">2 Mon.</li>
    <li class="">3 Mon.</li>
    <li class="text-center">4 Mon.</li>
    <li class="text-right">5 Mon.</li>
    <li class="text-right">6 Mon.</li>
  </ul>
</div>
<div class="large-12 columns">
  <h2 class="subheader">I get paid every:</h2>
  <div class="calc"><span id="payperiod"></span> weeks</div>
  <div class="range-slider radius" data-slider data-options="display_selector: #payperiod; start: 2; end: 4;"> <span class="range-slider-handle" role="slider" tabindex="0"></span> <span class="range-slider-active-segment"></span> </div>
  <div class="row show-for-medium-up">
    <div class="large-4 columns">Every 2 weeks</div>
    <div class="large-4 columns text-center">Twice a month</div>
    <div class="large-4 columns text-right">Once a month</div>
  </div>
</div>

         

I have all the above working as needed, I am now trying to pass off the value(s) into JS and calculate it. The docs show me what I need in a very basic sense, I just can't seem to get it to operate.

For example, a section of the original js code looks like this:

 $(function() {
 
 
$(".slider.nine").slider({
      value:100,
      min: 200,
      max: 1000,
      step: 25,
      slide: function( event, ui ) {
        $( "#amt" ).val( ui.value );
        $(".slider.nine .ui-slider-handle").html ("$" + ui.value);
        calc();
      }
    });
    
    
$(".slider.five").slider({
      value:2,
      min: 2,
      max: 6,
      step: 1,
      slide: function( event, ui ) {
        $( "#term" ).val( ui.value );
        calc();
      }
    });
    
$(".slider.three").slider({
      value:1,
      min: 1,
      max: 3,
      step: 1,
      slide: function( event, ui ) {
        $( "#payperiod" ).val( ui.value );
        calc();
      }
    }); 

I'm trying to convert THAT into foundation-friendly code. Should I be using:

slider: {
    on_change: function(){
      // do something when the value changes
    }
  }

Or this:

$('[data-slider]').on('change.fndtn.slider', function(){
  // do something when the value changes
});

Once I can get this part figured out, I think I can pull off the rest and calculate it.

Thanks.

range slider

Hi guys,

I'm having a bit of trouble converting a loan calculator.

The code given to me is working, but since we are converting the site over into foundation, I felt I should also convert the calculator.

So here is the base HTML, I'm just showing what is important.

<div class="large-12 columns">
  <h2 class="subheader">I would like to borrow:</h2>
  <div class="calc"> $<span id="amt"></span>.00</div>
  <div class="range-slider radius" data-slider data-options="display_selector: #amt; start: 200; end: 1000; step: 25;"> <span class="range-slider-handle" role="slider" tabindex="0"></span> <span class="range-slider-active-segment"></span> </div>
  <ul class="small-block-grid-9 show-for-medium-up">
    <li>200</li>
    <li class="text-left">300</li>
    <li class="text-center">400</li>
    <li class="text-center">500</li>
    <li class="text-center">600</li>
    <li class="text-center">700</li>
    <li class="text-center">800</li>
    <li class="text-center">900</li>
    <li class="text-right">1000</li>
  </ul>
</div>
<div class="large-12 columns">
  <h2 class="subheader">I can pay back in:</h2>
  <div class="calc"><span id="term"></span> Months</div>
  <div class="range-slider radius" data-slider data-options="display_selector: #term; start: 2; end: 6;"> <span class="range-slider-handle" role="slider" tabindex="0"></span> <span class="range-slider-active-segment"></span> </div>
  <ul class="small-block-grid-5 show-for-medium-up">
    <li class="text-left">2 Mon.</li>
    <li class="">3 Mon.</li>
    <li class="text-center">4 Mon.</li>
    <li class="text-right">5 Mon.</li>
    <li class="text-right">6 Mon.</li>
  </ul>
</div>
<div class="large-12 columns">
  <h2 class="subheader">I get paid every:</h2>
  <div class="calc"><span id="payperiod"></span> weeks</div>
  <div class="range-slider radius" data-slider data-options="display_selector: #payperiod; start: 2; end: 4;"> <span class="range-slider-handle" role="slider" tabindex="0"></span> <span class="range-slider-active-segment"></span> </div>
  <div class="row show-for-medium-up">
    <div class="large-4 columns">Every 2 weeks</div>
    <div class="large-4 columns text-center">Twice a month</div>
    <div class="large-4 columns text-right">Once a month</div>
  </div>
</div>

         

I have all the above working as needed, I am now trying to pass off the value(s) into JS and calculate it. The docs show me what I need in a very basic sense, I just can't seem to get it to operate.

For example, a section of the original js code looks like this:

 $(function() {
 
 
$(".slider.nine").slider({
      value:100,
      min: 200,
      max: 1000,
      step: 25,
      slide: function( event, ui ) {
        $( "#amt" ).val( ui.value );
        $(".slider.nine .ui-slider-handle").html ("$" + ui.value);
        calc();
      }
    });
    
    
$(".slider.five").slider({
      value:2,
      min: 2,
      max: 6,
      step: 1,
      slide: function( event, ui ) {
        $( "#term" ).val( ui.value );
        calc();
      }
    });
    
$(".slider.three").slider({
      value:1,
      min: 1,
      max: 3,
      step: 1,
      slide: function( event, ui ) {
        $( "#payperiod" ).val( ui.value );
        calc();
      }
    }); 

I'm trying to convert THAT into foundation-friendly code. Should I be using:

slider: {
    on_change: function(){
      // do something when the value changes
    }
  }

Or this:

$('[data-slider]').on('change.fndtn.slider', function(){
  // do something when the value changes
});

Once I can get this part figured out, I think I can pull off the rest and calculate it.

Thanks.