Menu icon Foundation
Can't make slider range works

Hi

 

I have dowload a complete version of the Foundation framework and try to use the slider range but it doesn't slide.

 

Here the code used :

<div class="block_input large-12 columns text-center">
   <div class="row">
	<div class="slider" data-slider data-initial-start="50" data-end="200">
	    <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
	    <span class="slider-fill" data-slider-fill></span>
	    <input type="hidden">
	</div>

   </div>
</div>

And the files included :

 

<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>

And what I see when the page is loaded

<div class="block_input large-12 columns text-center">
								<div class="row">
									<div data-end="200" data-initial-start="50" data-slider="qz8u0t-slider" class="slider">
									  <span tabindex="0" role="slider" data-slider-handle="" class="slider-handle" aria-controls="jhy3gn-slider" aria-valuemax="200" aria-valuemin="0" aria-valuenow="NaN" aria-orientation="horizontal" style=""></span>
									  <span data-slider-fill="" class="slider-fill" style="width: 25%;"></span>
									  <input type="hidden" id="jhy3gn-slider" max="200" min="0" step="1" value="NaN">
									</div>

								</div>
							</div>

Thanks

sliderrangefoundation sites

Hi

 

I have dowload a complete version of the Foundation framework and try to use the slider range but it doesn't slide.

 

Here the code used :

<div class="block_input large-12 columns text-center">
   <div class="row">
	<div class="slider" data-slider data-initial-start="50" data-end="200">
	    <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
	    <span class="slider-fill" data-slider-fill></span>
	    <input type="hidden">
	</div>

   </div>
</div>

And the files included :

 

<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>

And what I see when the page is loaded

<div class="block_input large-12 columns text-center">
								<div class="row">
									<div data-end="200" data-initial-start="50" data-slider="qz8u0t-slider" class="slider">
									  <span tabindex="0" role="slider" data-slider-handle="" class="slider-handle" aria-controls="jhy3gn-slider" aria-valuemax="200" aria-valuemin="0" aria-valuenow="NaN" aria-orientation="horizontal" style=""></span>
									  <span data-slider-fill="" class="slider-fill" style="width: 25%;"></span>
									  <input type="hidden" id="jhy3gn-slider" max="200" min="0" step="1" value="NaN">
									</div>

								</div>
							</div>

Thanks