Styling the Pips

Because the pips are all rendered, it’s possible to style them in unique ways to truly make the RangeSlider your own.

Pips

The pips are rendered in a container <div> with the class .rangePips.

Each individual pip is rendered as <span> with the class .pip and a unique [data-val] attribute.

Circles

Here’s an example of a pip that is rendered as a circle. We are setting every pip to be visible by passing pipstep={1} to the component. And after we have rendered every pip as a small dot, we make every 5th pip a bigger dot.

<RangeSlider id="circles" pips pipstep={1} all="label" />


/* styles for all pips */
#circles .rangePips .pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--handle-focus);
  transform: translate3d(-50%, 0, 0.1px) scale(0.1);
  opacity: 0.9999;
  will-change: transform opacity;
}
#circles .pipVal {
  opacity: 0;
}

/* styles for the selected pip */
#circles .rangePips .pip.selected {
  transform: translate3d(-50%, 6px, 0.1px) scale(0.8);
}
#circles .pip.selected .pipVal {
  opacity: 1;
  transition-duration: 0s;
}

/* styles for the pips directly after the selected pip */
#circles .rangePips .pip.selected + * {
  transform: translate3d(calc(-50% + 2px), 4px, 0.1px) scale(0.6);
}
#circles .rangePips .pip.selected + * + * {
  
  transform: translate3d(calc(-50% + 2px), 2px, 0.1px) scale(0.4);
}
#circles .rangePips .pip.selected + * + * + * {
  
  transform: translate3d(calc(-50% + 1px), 1px, 0.1px) scale(0.2);
}

/* styles for the pips directly before the selected pip */
#circles .rangePips .pip:has(+ .selected) {
  transform: translate3d(calc(-50% - 2px), 4px, 0.1px) scale(0.6);
}
#circles .rangePips .pip:has(+ * + .selected) {
  
  transform: translate3d(calc(-50% - 2px), 2px, 0.1px) scale(0.4);
}
#circles .rangePips .pip:has(+ * + * + .selected) {
  
  transform: translate3d(calc(-50% - 1px), 1px, 0.1px) scale(0.2);
}

/* hide the focus ring when hovering */
.rangeSlider.hoverable:not(.disabled) .rangeHandle::before {
  display: none;
  box-shadow: none;
}

Futuristic Pips

Normally the step and pipstep only allow a regular interval of pips to be shown/hidden based on the multipliers set (step and pipstep).

But here we are demonstrating the complete control of individual pips and labels by modifying the pipstep and then targeting specific pips with CSS by utilizing the [data-val] attribute.

Check out the CSS tab in the code block to see how we achieve this.

<RangeSlider
  id="future"
  pips
  all="label"
  step={1000}
  pipstep={5}
  float
  min={0}
  max={1000000}
  range="min"
  bind:value
  {formatter}
/>

/* Here we target specific pips and show them,
  which was the imaginary requirement of the slider design */
  
  #future .pip[data-val="75000"],
  #future .pip[data-val="250000"],
  #future .pip[data-val="750000"],
  #future .pip[data-val="925000"] {
    display: block;
  }
  
  #future .pip[data-val="75000"] .pipVal,
  #future .pip[data-val="925000"] .pipVal {
    top: -2.25em;
    transform: translateX(-20%);
  }
  
  #future .pip[data-val="925000"] .pipVal {
    transform: translateX(-80%);
  }

/* Range Slider / Bar customization */

#future.rangeSlider {
  font-family: "Mohave", sans-serif;
  font-weight: 300;
  font-style: italic;
  margin-inline: 100px;
  --handle-focus: limegreen;
  --float-text: black;
  height: 3px;
  background: black;
}

#future .rangeBar {
  height: 5px;
  top: -1px;
  background: limegreen;
}

/* Pips customization */

#future .pip {
  display: none;
}

#future .pip {
  background: none;
  top: 0;
  height: 1px;
}

#future .pip::before {
  content: "";
  position: absolute;
  background: black;
  height: 1em;
  width: 1px;
  top: -0.5em;
  transform: translateY(-2px) translateX(-1px) rotate(10deg);
}

#future .pip.first,
#future .pip.last {
  display: block;
  top: 0;
  background: transparent;
}

#future .pipVal {
  font-size: 14px;
}

#future .pip.first .pipVal {
  top: 0;
  left: -1em;
  transform: translateX(-100%) translateY(-50%);
  text-align: right;
}

#future .pip.last .pipVal {
  top: 0;
  right: -1em;
  transform: translateX(100%) translateY(-50%);
  text-align: left;
}

#future .pip.selected .pipVal {
  opacity: 0;
}

/* Floats / Handles customization */

#future .rangeHandle {
  height: 7px;
  top: 1px;
}

#future .rangeNub {
  transform: none;
  background: lime;
  box-shadow: 0 0 0px 2px black;
}

#future .rangeFloat {
  background: linear-gradient(to right, rgb(240, 241, 245, 0.25), rgb(240, 241, 245, 1) 20% 80%, rgb(240, 241, 245, 0.25));
  top: -0.4em;
  padding: 0.1em 1em;
  line-height: 1;
  font-weight: 600;
  font-size: 1.25em;
}

Futuristic Pips & Labels

500,000

0 5,000 10,000 15,000 20,000 25,000 30,000 35,000 40,000 45,000 50,000 55,000 60,000 65,000 70,000 75,000 80,000 85,000 90,000 95,000 100,000 105,000 110,000 115,000 120,000 125,000 130,000 135,000 140,000 145,000 150,000 155,000 160,000 165,000 170,000 175,000 180,000 185,000 190,000 195,000 200,000 205,000 210,000 215,000 220,000 225,000 230,000 235,000 240,000 245,000 250,000 255,000 260,000 265,000 270,000 275,000 280,000 285,000 290,000 295,000 300,000 305,000 310,000 315,000 320,000 325,000 330,000 335,000 340,000 345,000 350,000 355,000 360,000 365,000 370,000 375,000 380,000 385,000 390,000 395,000 400,000 405,000 410,000 415,000 420,000 425,000 430,000 435,000 440,000 445,000 450,000 455,000 460,000 465,000 470,000 475,000 480,000 485,000 490,000 495,000 500,000 505,000 510,000 515,000 520,000 525,000 530,000 535,000 540,000 545,000 550,000 555,000 560,000 565,000 570,000 575,000 580,000 585,000 590,000 595,000 600,000 605,000 610,000 615,000 620,000 625,000 630,000 635,000 640,000 645,000 650,000 655,000 660,000 665,000 670,000 675,000 680,000 685,000 690,000 695,000 700,000 705,000 710,000 715,000 720,000 725,000 730,000 735,000 740,000 745,000 750,000 755,000 760,000 765,000 770,000 775,000 780,000 785,000 790,000 795,000 800,000 805,000 810,000 815,000 820,000 825,000 830,000 835,000 840,000 845,000 850,000 855,000 860,000 865,000 870,000 875,000 880,000 885,000 890,000 895,000 900,000 905,000 910,000 915,000 920,000 925,000 930,000 935,000 940,000 945,000 950,000 955,000 960,000 965,000 970,000 975,000 980,000 985,000 990,000 995,000 1,000,000

500000

Extreme control with JS

The previous example demonstrated how to only show a subset of pips by using CSS. But what if we wanted the display values to be dynamic?

In this case, we could use Javascript to dynamically set the CSS values;

<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%);
}