How to create a dual-handle range slider in Foundation 5?

Question

Coding newbie here--I'm using Foundation 5 as a front-end framework for an app I am creating, and, I am trying to create a range slider that has two handles. Does anyone have any idea how to do this? Simply repeating the "range-slider-handle" span element does create two handles, but one of the handles is fixed to the left end of the range and cannot be moved.

If anyone can advise on this issue, it would be much appreciated!

//This creates a slider with two handles, but one handle is fixed and cannot be moved.
<div class="range-slider round" data-slider>
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

Answer 1

Foundation hasn't this kind of slider. But you can use this one from the jQuery UI

Answer 2

Very late answer:

• Foundation+Angular: https://github.com/fulup-bzh/RangeSlider
• Foundation+jQuery: https://github.com/circlingthesun/angular-slider