Month Picker

Here’s an example of a nice looking month picker slider with labels inside the handles. There’s two key parts to this example;

Set the formatter function to format the values as a month name
Use the rangeGapMin option so we cannot select the same month twice
Use the css grid to move the .rangeFloat label on top of the .rangeHandle

Of course, the normal options to enable floats and the range are required.

<script>
  let values = [2, 9];
  let dateFormat = new Intl.DateTimeFormat("en", { month: "short" });

  const formatter = (v, i, p) => {
    return dateFormat.format(new Date(new Date().getFullYear(), v, 1));
  };

</script>

<RangeSlider
  id="month-picker"
  bind:values
  float
  pips
  first="label"
  last="label"
  range
  max={11}
  {formatter}
  rangeGapMin={1}
  pushy
  draggy
/>

  /* general RangeSlider styling */
  #month-picker.rangeSlider {
    font-size: 12px;
    text-transform: uppercase;
  }

  #month-picker.rangeSlider.focus .rangeBar {
    background: linear-gradient(to left, var(--handle) 20%, var(--handle-focus));
  }

  #month-picker.rangeSlider.focus:has([data-handle="1"].active) .rangeBar {
    background: linear-gradient(to right, var(--handle) 20%, var(--handle-focus));
  }

  /* Move the floating label on top of the handle */
  
  #month-picker.rangeSlider .rangeHandle {
    width: 34px;
    height: 34px;
    background: none;
    display: grid;
    grid-template: 1fr / 1fr;
    align-items: center;
  }

  #month-picker.rangeSlider .rangeFloat {
    opacity: 1;
    background: transparent;
    translate: none;
    grid-area: 1 / 1;
    position: static;
  }

  /* Make the handles look like Squircles */

  #month-picker.rangeSlider .rangeHandle .rangeNub {
    border-radius: 0;
    transform: translate(0, 0);
    mask-image: url("data:image/svg+xml;utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E %3Cpath d=' M 100,0 C 22.460000000000008,0 0,22.460000000000008 0,100  0,177.54 22.460000000000008,200 100,200  177.54,200 200,177.54 200,100  200,22.460000000000008 177.54,0 100,0 ' style='fill: black;'%3E%3C/path%3E %3C/svg%3E");
    mask-size: cover;
    grid-area: 1 / 1;
  }

  /* Hide the pips, and values when selected */
  
  #month-picker.rangeSlider .rsPip {
    background: transparent;
  }

  #month-picker.rangeSlider .rsPip.rsSelected .rsPipVal {
    opacity: 0;
    transition: all 0.25s ease;
  }

Arbitary Labels

The formatter function can be used to format the values as any arbitrary string. See the Formatter example for more information.