Values & Binding

Setting the default value(s) for the Slider is done using the value property or values property, which accepts a number or an number[] array respectively.

The values property can have any number of values, and the length directly corresponds to the number of handles on the Slider. All values are clamped to the given min and max range.

Simple Values

<RangeSlider value={25} /> <!-- value as a number -->
<RangeSlider values={[75]} /> <!-- values as an array -->
Values Property

Binding

The value/values property can also be bound with the svelte bind: action.
This allows the Slider to read/write the current value(s) from a variable.

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

<RangeSlider bind:value />
<pre class="astro-code"><code>bind:value</code> ( <code>{value}</code> )</pre>
<RangeSlider bind:values />
<pre class="astro-code"><code>bind:values={'{values}'}</code> ( <code>{values}</code> )</pre>
Binding Values 
bind:value ( 11 )
bind:values={values} ( 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, and the length of the array corresponds to the number of handles on the Slider.

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

<RangeSlider bind:values />[{values}]

<RangeSlider bind:values={crazy} />[{crazy}]
Multiple Values 
[10,50,90]

[10,20,30,40,50,60,70,80,90]
but why?

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