Menu icon Foundation
Bug in range slider

Hi there,

I found a bug in the range slider. If you add a start point, the slider won't start at that point. Also in the examples it is not working.

Anyone an idea?

bugrange slider

Hi there,

I found a bug in the range slider. If you add a start point, the slider won't start at that point. Also in the examples it is not working.

Anyone an idea?

Rafi Benkual over 5 years ago

Can you post the code you are working with so we can see what's happening?

Miguel van den Branden over 5 years ago

Hi Rafi,

This is the code I'm using. You should expect it starts at 20 and ends at 120, but it starts at 0 and ends to 100.

<div class='medium-12 columns'>
    <label for="available_time">[-L:AVAILABLE_TIME-]</label>
    <span id="time" style="display: block;margin-top: 17px;"></span>
    <div class="range-slider" data-options="start: 20; end: 120; step: 5; display_selector:#time;" data-slider>
        <span class="range-slider-handle"></span>
        <span class="range-slider-active-segment"></span>
        <input type="hidden" id='available_time' name="available_time" value="[-AVAILABLE_TIME_VALUE-]">
    </div>
</div>

Ricardo Vermaat over 5 years ago

It seems that the start point is subtracted from the end point. If the range is "start: 20; end: 120;". The slider starts at 0 and ends at 100. The size of the slider is correct, the values aren't.

I've been having issues with the settings of the range slider aswell. The following code is not doing anything for me:

$(document).foundation({
  slider:{
    on_change: function(){
      alert('The value of the range slider has been changed');
    }
  }
});

Brian Findlay over 5 years ago

I've observed this as well.

The example in the documentation would be expected to yield a slider with a range of 1-10, but instead yields one with a range of 0-9.

<div class="range-slider" data-slider data-options="start: 1; end: 10;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

Was very excited to see this component included in release 5.2, but will have to stick with nouislider until this is fixed (which I'm sure will be very soon). Thanks.

Brian Findlay over 5 years ago

Additionally, there appears to be a rounding operation being executed when setting values.

Consider this example, where the slider is perhaps intended to select a currency value (to the nearest cent):

<div class="range-slider" data-slider data-options="start: 1; end: 10; step: 0.01">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

This slider will indeed select values with 1-cent steps. However, using javascript to set the values to a non-integer number will not work.

This javascript...
Javascript
$('div.range-slider').foundation('slider', 'set_value', 5.01);

...results in setting the slider value to 5, not 5.01.