DaisyUI-like Slider

Here I am trying to recreate the slider design from DaisyUI, but adding my own bit of flare on the pips, labels and floats. The colors are based on the theme variables that DaisyUI creates.

<script>
  let values = [ 20, 80 ];
  // use this class to change the position of the floats at certain values
  $: rangeFlip = values[1] - values[0] <= 20;

  let rangeValues = [ 20 ];
  // use this class to change the position of the floats at certain values
  $: minFlip = rangeValues[0] <= 20;
  $: maxFlip = rangeValues[0] >= 80;
</script>

<div class="daisy-ui" class:minFlip class:maxFlip class:rangeFlip>
  <RangeSlider pips float pushy bind:values  />
  <RangeSlider pips float pushy range bind:values />
  <RangeSlider pips draggy pushy range rangeFloat bind:values rangeGapMin={10} />
  <RangeSlider pips float pushy range="min" bind:values={rangeValues} step={5} />
  <RangeSlider pips float pushy range="max" bind:values={rangeValues} step={5} />
</div>

/**
 * Range Slider default size/colors
 */
.daisy-ui .rangeSlider {
  font-size: 18px;

  /**
   * here we are setting the default colors for the slider
   * based on the daisyui theme. This will not work unless 
   * the daisyui library is already loaded.
   */

  --slider-accent: var(--color-base-content);
  --slider-bg: var(--color-base-300);
  --slider-base: var(--color-base-content);
  --range: var(--color-base-content);
  --range-inactive: var(--color-base-content);
  --handle: var(--color-base-100);
  --handle-inactive: var(--color-base-100);
  --handle-focus: var(--color-base-100);
  --handle-border: var(--color-base-content);
  --float: var(--color-base-content);
  --float-inactive: var(--color-base-content);
}

.daisy-ui .rangePips {
  --pip: color-mix(in oklab, var(--color-base-content) 50%, #0000);
  --pip-in-range: var(--color-base-300);
}

/**
 * Track / Bar
 */
.daisy-ui .rangeSlider .rangeBar {
  height: 1.4em;
  top: 50%;
  transform: translateY(-50%);
}

.daisy-ui .rangeSlider.rsRange .rangeBar {
  border-radius: 0;
}

.daisy-ui .rangeSlider.rsRange.rsMin .rangeBar {
  border-radius: 100px 0 0 100px;
}

.daisy-ui .rangeSlider.rsRange.rsMax .rangeBar {
  border-radius: 0 100px 100px 0;
}

/** 
 * Handles / Floats
 */
.daisy-ui .rangeSlider .rangeNub,
.daisy-ui .rangeSlider.rsFocus .rangeNub,
.daisy-ui .rangeSlider .rangeHandle.rsActive .rangeNub {
  border: 3px solid var(--slider-base);
}

.daisy-ui .rangeSlider .rangeFloat {
  font-size: 0.75em;
  line-height: 1.8em;
  height: 1.8em;
  min-width: 2.4em;
  padding-block: 0;
  padding-inline: 0.75em;
  border-radius: 2em;
  transform: translateY(-5px);
}

.daisy-ui .rangeSlider.rsRange .rangeFloat {
  height: 1.8em;
  top: 50%;
  bottom: auto;
  transform: translateY(calc(-50% - 2px));
  display: flex;
  align-items: center;
  justify-content: center;
}

.daisy-ui .rangeSlider.rsRange .rangeBar .rangeFloat {
  background: transparent;
}

/* float position on the first handle (or min-range slider) */
.daisy-ui .rangeSlider.rsRange.rsMin .rangeFloat,
.daisy-ui .rangeSlider.rsRange.rsMin:hover .rangeFloat,
.daisy-ui .rangeSlider.rsRange:not(.rsMin):not(.rsMax) .rangeHandle:nth-child(2) .rangeFloat,
.daisy-ui .rangeSlider.rsRange:not(.rsMin):not(.rsMax) .rangeHandle:nth-child(2):hover .rangeFloat {
  transform: translateX(-100%) translateY(calc(-50% - 2px));
  background: transparent;
}

/* float position on the second handle (or max-range slider) */
.daisy-ui .rangeSlider.rsRange.rsMax .rangeFloat,
.daisy-ui .rangeSlider.rsRange.rsMax:hover .rangeFloat,
.daisy-ui .rangeSlider.rsRange:not(.rsMin):not(.rsMax) .rangeHandle:nth-child(1) .rangeFloat,
.daisy-ui .rangeSlider.rsRange:not(.rsMin):not(.rsMax) .rangeHandle:nth-child(1):hover .rangeFloat {
  transform: translateX(100%) translateY(calc(-50% - 2px));
  background: transparent;
}

/* flip the float position on the first handle when range is < 20 */
.daisy-ui.minFlip .rangeSlider.rsRange.rsMin .rangeFloat,
.daisy-ui.minFlip .rangeSlider.rsRange.rsMin:hover .rangeFloat,
.daisy-ui.rangeFlip
  .rangeSlider.rsRange:not(.rsMin):not(.rsMax)
  .rangeHandle:nth-child(2)
  .rangeFloat,
.daisy-ui.rangeFlip
  .rangeSlider.rsRange:not(.rsMin):not(.rsMax)
  .rangeHandle:nth-child(2):hover
  .rangeFloat {
  transform: translateX(100%) translateY(calc(-50% - 2px));
  background: var(--float);
}

/* flip the float position on the second handle when range is > 80 */
.daisy-ui.maxFlip .rangeSlider.rsRange.rsMax .rangeFloat,
.daisy-ui.maxFlip .rangeSlider.rsRange.rsMax:hover .rangeFloat,
.daisy-ui.rangeFlip
  .rangeSlider.rsRange:not(.rsMin):not(.rsMax)
  .rangeHandle:nth-child(1)
  .rangeFloat,
.daisy-ui.rangeFlip
  .rangeSlider.rsRange:not(.rsMin):not(.rsMax)
  .rangeHandle:nth-child(1):hover
  .rangeFloat {
  transform: translateX(-100%) translateY(calc(-50% - 2px));
  background: var(--float);
}

.daisy-ui.rangeFlip .rangeSlider.rsDrag .rangeBar .rangeFloat {
  transform: translateY(calc(-150% - 2px));
  background: var(--float);
}

/**
 * Pips
 */
.daisy-ui .rangeSlider .rangePips {
  z-index: 1;
}
.daisy-ui .rangeSlider.rsRange .rangePips {
  pointer-events: none;
}

.daisy-ui .rangeSlider .rsPip {
  border-radius: 3px;
  translate: -1px -5px;
  pointer-events: all;
}

.daisy-ui .rangeSlider .rsPip.rsSelected,
.daisy-ui .rangeSlider .rsPip.rsInRange {
  width: 3px;
  translate: -1px -1px;
}

.daisy-ui .rangeSlider .rsPip.rsInRange {
  width: 1px;
  height: 4px;
}