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, floats and colors

<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 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;
  
  --handleBg: var(--range-inactive);
}

.daisy-ui .rangeSlider.rsFocus { 
  --handleBg: var(--range); 
}

/**
 * Track / Bar
 */
.daisy-ui .rangeSlider .rangeBar {
  height: 26px;
  top: -0.5em;
}

.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 {
  background-color: white;
  border: 3px solid var(--handleBg);
}

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

.daisy-ui .rangeSlider.rsRange .rangeFloat {
  height: 26px;
  top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 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%);
  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%);
  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%);
  background: var(--handleBg);
}

/* 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%);
  background: var(--handleBg);
}

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

.daisy-ui .rangeSlider .rsPip {
  border-radius: 3px;
  background: var(--slider);
  translate: -1px -5px;
}

.daisy-ui .rangeSlider .rsPip.rsSelected,
.daisy-ui .rangeSlider .rsPip.rsInRange {
  width: 3px;
  background: var(--handleBg);
  translate: -1px -1px;
}

.daisy-ui .rangeSlider .rsPip.rsInRange {
  width: 1px;
  height: 4px;
  background: hsla(0, 0%, 100%, 0.75);
}