Pips

Here we demonstrate the Slider’s main feature; “notches”, or as I call them; pips. These little markers sit below the Slider by default to mark regular intervals along the Slider’s length.

<script>
  let values = [50];
  let smallValues = [3];
</script>

<RangeSlider pips bind:values />
<RangeSlider pips max={6} bind:values="{smallValues}" />
Pips/Notches/Markers along the Slider
50 | 3

Control the Display

Pip display is controlled by the properties; all, first, last and rest. These properties can be set to true or false to control the display of the pips.

This is also true for labels. See more here

<RangeSlider pips bind:all bind:first bind:last bind:rest />
Controlling the Display
<RangeSlider pips all="pip" />
50