Basic Usage

Minimal Configuration

The most basic example is to provide a min, max and value prop. This will render a Slider with a single handle.

<script>
  import RangeSlider from 'svelte-range-slider-pips';
</script>

<RangeSlider />

But this is kind of useless! Unless you just want a pretty UI toy to play with! Because once rendered to the page, there’s no feedback upon interaction.

Binding the values

Typically we would want to be able to use the values of the Slider in our application. This could either be to change another part of the interface in a Rich Internet Application, or to send the values to a server as part of a Form.

<script>
  import RangeSlider from 'svelte-range-slider-pips';
  let values = [10];
</script>

<RangeSlider min={0} max={100} bind:values />

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

Common Setup

The most common use case is to allow a user to select a value from a range of values. Using the special feature of pips to render beside the Slider to hint at the progress. It’s also common to show a float value above the handle to help the user see the exact value they are selecting.

Again; we are binding to a values[] variable so that the Slider’s value can be used in our application.

<script>
  import RangeSlider from 'svelte-range-slider-pips';
  let values = [10];
</script>

<RangeSlider pips float first=label last=label bind:values />