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} range pushy rangeGapMin={5} />
<RangeSlider min={ minmax[0] } max={ minmax[1] } bind:values pips first="label" last="label" />