Menu icon Foundation
Range Slider not working

Hi, I'm new to foundation so this might be a really obvious thing!

But I have installed the zurb template via Yeti Launch and I'm trying to use the range slider on my website.

 

I have used this code...as per the documentation...

<div class="range-slider" data-slider data-options="start: 1; end: 10;">

<span class="range-slider-handle" role="slider" tabindex="0"></span>

<span class="range-slider-active-segment"></span>

<input type="hidden">

</div>

 

And the foundations.slider.js is being called but I'm getting an error and the slider is not displaying. The code is on the page and the js is being called. Error below is showing in console...

foundation.slider.js:223

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefinedSlider._setHandlePos @ foundation.slider.js:223

Slider._init @ foundation.slider.js:184

Slider @ foundation.slider.js:22

(anonymous function) @ foundation.core.js:170

jQuery.extend.each @ jquery.js:374

jQuery.fn.jQuery.each @ jquery.js:139

(anonymous function) @ foundation.core.js:164

jQuery.extend.each @ jquery.js:374

Foundation.reflow @ foundation.core.js:156

foundation @ foundation.core.js:246

(anonymous function) @ app.js:1

 

and the error is pointing to this line of code...line 223 of foundation.slider.js

halfOfHandle = $hndl[0].getBoundingClientRect()[hOrW] / 2,

 

any ideas?

 

thanks

range slider

Hi, I'm new to foundation so this might be a really obvious thing!

But I have installed the zurb template via Yeti Launch and I'm trying to use the range slider on my website.

 

I have used this code...as per the documentation...

<div class="range-slider" data-slider data-options="start: 1; end: 10;">

<span class="range-slider-handle" role="slider" tabindex="0"></span>

<span class="range-slider-active-segment"></span>

<input type="hidden">

</div>

 

And the foundations.slider.js is being called but I'm getting an error and the slider is not displaying. The code is on the page and the js is being called. Error below is showing in console...

foundation.slider.js:223

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefinedSlider._setHandlePos @ foundation.slider.js:223

Slider._init @ foundation.slider.js:184

Slider @ foundation.slider.js:22

(anonymous function) @ foundation.core.js:170

jQuery.extend.each @ jquery.js:374

jQuery.fn.jQuery.each @ jquery.js:139

(anonymous function) @ foundation.core.js:164

jQuery.extend.each @ jquery.js:374

Foundation.reflow @ foundation.core.js:156

foundation @ foundation.core.js:246

(anonymous function) @ app.js:1

 

and the error is pointing to this line of code...line 223 of foundation.slider.js

halfOfHandle = $hndl[0].getBoundingClientRect()[hOrW] / 2,

 

any ideas?

 

thanks

Rafi Benkual over 3 years ago

It might be best to make sure your project is upgraded to the latest version. In your bower.jsopn file, you can update the version #

"dependencies": {
    "foundation-sites": "~6.2.0",
    "motion-ui": "~1.2.2"
  },

6.2 is the latest. Save this, then run `bower update` in the command line.

After updating, that should solve the issue.

lbuddha1 over 3 years ago

Thank you for the reply. I have tried to do as you have suggested but when I enter 'bower update' nothing is happening? And the range slider is still not displaying! Any ideas?

thank you