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} />
Step at Multiples of 10

0-20 slider with step=2.5

0 2.5 5 7.5 10 12.5 15 17.5 20

0-10,000 slider with step=1000

0 1000 2000 3000 4000 5000 6000 7000 8000 9000 10000
2.5 | 2000

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 bind:values />
Step at Multiples of 10
-2,10

You can see that as the Slider initialises, the values change from [-2,10] to [1,8] as those are the closest values possible.

Additionally, there is always a last pip that is selectable, which is aligned to the max value. In this case, the max value is 24, so the last pip is 24, even though it is not a multiple of 7.