Values & Binding

Setting the default value(s) for the Slider is done using the values property, which accepts an Array[]. The values property can have any number of values, and the length directly corresponds to the number of handles on the Slider. The values are limited to the given min and max range.

Simple Values

<RangeSlider values={[25]} />
<RangeSlider values={[50]} />
<RangeSlider values={[75]} />
Values Property

Binding

The values property can also be bound with bind:values. This allows the Slider to save the current value(s) to a variable.

<script>
  let values = [11];
  let myValues = [69];
</script>

<RangeSlider bind:values />
<RangeSlider bind:values={myValues} />
Binding Values 
bind:values ( 11 )
bind:values={myValues} ( 69 )

Multiple Values

The values property can also accept multiple values. This allows the Slider to have multiple handles. The values are stored in an array. The length of the array corresponds to the number of handles on the Slider.

<script>
  let values = [10,50,90];
  let crazy = [10,20,30,40,50,60,70,80,90];
</script>

<RangeSlider bind:values />
<RangeSlider bind:values={crazy} />
Multiple Values 
10,20,30,40,50,60,70,80,90

No idea why anyone would ever want 9 handles on their Slider, but it’s totally possible!