Min & Max

The min and max props are used to set the minimum and maximum values of the Slider. The default values are 0 and 100 respectively.

Basic Example

min and max can be set to any number and all handles will be constrained to these.

<script>
  let values = [50];
</script>

<RangeSlider min={40} max={60} bind:values />

Negative Values

Negative values are also accepted for min and max.

<script>
  let values = [-25, 25];
</script>

<RangeSlider min={-50} max={50} bind:values />

Bound & Clamped

The min and max props can also be bound to a variable. Not really sure why you’d want to do this, but it’s possible.

Also demonstrated here is that if a Slider’s value is outside of the min and max range, it will be clamped to the nearest value.

<script>
  let minmax = [40, 60];
  let values = [0];
</script>

<RangeSlider bind:values={minmax} />
<RangeSlider min={ minmax[0] } max={ minmax[1] } bind:values pips />