Skip to content

jQuery rangeslider range options

Maikel Bos edited this page Jan 9, 2020 · 1 revision

By default, jQuery-rangeslider creates a slider that ranges from 0 to 100 with steps of size 10, giving you 11 options in total, with a default value of 0. To control the range, you can use below attributes on the slider element:

  • data-range-start indicates the start value of the slider; it defaults to 0
  • data-step-size indicates the value increase of each step; it defaults to 10
  • data-step-count indicates the total number of steps; the total possible number of values is this plus one; it defaults to 10
  • data-value is the starting value of the slider; it will be converted to a valid step on initialization; it defaults to 0

For example, the below slider gives a range of [-100, -85, -70, ..., 170, 185, 200] with a starting value of 5 (since 0 is not a valid value):

<div id="example-rangeslider" data-range-start="-100" data-step-size="15" data-step-count="20" data-value="0">
</div>

<script type="text/javascript">
    $('#example-rangeslider').rangeslider();
</script>
Clone this wiki locally