Menu icon Foundation
Range Slider handle starting value

I've got a range slider on my page which is set up and working properly, but I'd like to set an initial value for the position of the slider handle and I don't see anything in the docs about this. It just defaults to the middle value, so for example, if the range has:

data-options="start: 0; end: 100;"

Then the handle starts at 50 when the page loads. I'd like it to start at 0. How do I do this?

range slider

I've got a range slider on my page which is set up and working properly, but I'd like to set an initial value for the position of the slider handle and I don't see anything in the docs about this. It just defaults to the middle value, so for example, if the range has:

data-options="start: 0; end: 100;"

Then the handle starts at 50 when the page loads. I'd like it to start at 0. How do I do this?

Paul Woestelandt over 4 years ago

You should set the data-slider attribute with expected initial value :

<div class="range-slider" data-slider="0" data-options="start: 0; end: 100;">
  [...]
</div>