Pips | Range Slider Pips

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}" />

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 />

Extreme control with JS

There are scenarios whereby you may wish to only show a certain subset of pips on the slider, for this we should consider using css to hide the pips that we don’t want to show.

<script lang="ts">

  let value = 30;
  let validValues = [10, 30, 90];

  /** 
   * function to generate a random array of values. In reality
   * you would have more reasonable logic to generate the values
   */
  const randomize = () => {
    const count = 3 + Math.floor(Math.random() * 3);
    const valuesArray = new Array(count).fill(0).map((_, i) => Math.floor(Math.random() * 100));
    return valuesArray;
  };

  const setPipValues = () => (validValues = randomize());

  // valid class to display a red handle if invalid
  $: isValid = validValues.includes(value);

  // here we create a <style> tag which will be inserted into the page
  // and for each valid value, we will create a css rule to show the pip
  $: style = `
    <style>
      ${validValues.map((v) => `#testSlider .pip[data-val="${v}"] { display: block; }`).join("")}
    </style>  
  `;
</script>

<!-- insert the dynamic css into the page-->
{@html style}

<!-- wrap the slider so we can style it as invalid -->
<div class:invalid={!isValid}>
  <!-- give the slider an ID so we can style it -->
  <RangeSlider id="testSlider" bind:value float pips all="label" hoverable pipstep={1} />
</div>

<button type="button" on:click={setPipValues}>Randomize</button>

/* hide all pips by default, we'll override this with JS */
#testSlider .pip {
  display: none;
}
/* always show the floating label */
#testSlider .rangeFloat {
  opacity: 1;
} 
/* special styling for when the slider is invalid */
.invalid #testSlider {
  --range-handle: hsl(352, 90%, 50%);
  --range-handle-focus: hsl(352, 90%, 50%);
  --range-handle-inactive: hsl(352, 80%, 70%);
}