Disabled

The Slider accepts a boolean value for disabled and hoverable.

Disabled

When the boolean for disabled is true, the Slider will be disabled and unresponsive to user input. This prop is reactive, so it can be toggled at any time.

<RangeSlider disabled />

Toggled by a variable

Here is an example of a Slider that is disabled by default, but can be toggled by a variable. You could imagine this being used in a form where the user must check a box before they can interact with the Slider.

<script>
  let values = [50];
  let disabled = false;
  let toggle = () => disabled = !disabled;
</script>

<RangeSlider {disabled} bind:values />

<button type="button" on:click={toggle}>
  {disabled ? 'Enable' : 'Disable'}
</button>

Updating while disabled

Here we update a disabled Slider’s value.

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

<RangeSlider disabled range float bind:values />

<input type="number" bind:value={values[0]}>
<input type="number" bind:value={values[1]}>