zurb-foundationzurb-foundation-5

Zurb Foundation 5.5.2 range slider clicking on bar to advance handle to position does not work

I am using Zurb Foundation 5.5.2 and trying to get the range slider to work like on the Foundation web site documentation page for range sliders. The desired functionality is that you click on any location on the bar, and the handle advances to that location. On the Foundation web site kitchen sink page, clicking on the range slider bar does nothing. On this codepen that I use the most basic range slider code, you also cannot click on the bar and get the handle to advance. How do I get this to work?

Here is the Codepen code:

<div class="range-slider" data-slider>
  <span class="range-slider-handle" role="slider" tabindex="0"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>
Solution

  • Foundation v5.x serie seems not trigger mousemove event when using slider. Digging into foudantion issues on github I found this:

    slider: add support for changing by clicking on the slider without having started to drag from the handle

    It strikes me that this feature is only available for future versions of Foundation library such as v5.5.3 or v5.6 (see milestones).

    But you can use that rigth now, just copy and past o raw code from github:

    Just click on "raw" button and save to the local storage.
    So it should be work like this:

    <!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
  </head>
  <body>

    <div class="row">
      <div class="small-10 medium-11 columns">
        <!-- SLIDER START   -->
        <div class="range-slider" data-slider  data-options="display_selector: #sliderOutput3;trigger_input_change: true">
          <span class="range-slider-handle" role="slider" tabindex="0"></span>
          <span class="range-slider-active-segment"></span>
        </div>
        <!-- SLIDER END   -->
      </div>
      <div class="small-2 medium-1 columns">
        <span id="sliderOutput3"></span>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Foundation updated -->
    <script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.js"></script>
    <script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.slider.js"></script>
    
    <script>$(document).foundation();</script>
  </body>
</html>