Steps

Occasionally you may want to limit the interval of values that can be selected. For example, maybe we are only allowing the user to to choose multiples of 10, but up to a maximum of 100. This is where step can be used.

Basic Example

Here’s an example where we’re limiting the values that can be selected to multiples of 2.5 or 1000.

<script>
  let value = 2.5;
  let bigValue = 2000;
</script></p>

<RangeSlider step={2.5} pips max={20} all="label" bind:value /></p>

<RangeSlider step={1000} pips max={10000} all="label" bind:value={bigValue} />

Clamping Values to Step

When step is supplied, the initial values of the Slider will be clamped to the nearest value that is a multiple of step. This is to ensure that the values are always valid.

The max value is always rendered and selectable, regardless of whether it is a multiple of step. So try to make it a multiple if you want a nice looking Slider.

<script>
  let values = [-2, 10];
  const step = 7;
  const min = -6;
  const max = 24;
</script>

<RangeSlider {step} {min} {max} pips all="label" bind:values />