[bug] ... thumb overflow is hidden with daisyUI

[dei8bit]

Describe the bug:

I'm using svelte 5 + daisyUI v5+ tailwind v4

I was testing exactly the recipe for using range slider pips with daisyUI.

and to my surprise some ranges look fine, but others have the thumb showing cut off.

Steps to reproduce the behavior:

1. install svelte+sveltekit with bun
2. add the range slider pips library
3. add tailwind and daisyUI and configure correctly
4. try the recipie
5. see the behavior

Expected behavior

the idea would be that the styles are well displayed given the code requested in the recipe

Screenshots

pay attention to the last three ranges

Device/Environtment

Browser : brave
runtime: bun

+page.svelte

<script>
  import RangeSlider from 'svelte-range-slider-pips'
  // ----
  let minValues = [20]
  // use this class to change the position of the floats at certain values
  $: minFlip = minValues[0] <= 20
  $: maxFlip = minValues[0] >= 80

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

<section class="flex items-center justify-center  w-full border-2 p-12">
  <div class="daisy-ui w-8/12" class:minFlip class:maxFlip class:rangeFlip>
    <RangeSlider pips float pushy values={[20, 80]} />
    <RangeSlider pips float pushy range bind:values />
    <RangeSlider pips float pushy range="min" bind:values={minValues} step={5} />
    <RangeSlider pips float pushy range="max" bind:values={minValues} step={5} />
  </div>
</section>

---

and here is how looks my global.css file

@import "tailwindcss";
@plugin "daisyui";


@layer components {
  .items {
    @apply flex max-h-120 min-h-120 w-124 flex-col items-center gap-2 overflow-hidden overflow-y-scroll rounded-xl bg-blue-300/10 my-2;
  }

}

/**
 * Range Slider default size/colors
 */
.daisy-ui .rangeSlider {
  font-size: 18px;
  --handleBg: var(--range-inactive);
}

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

/**
 * Track / Bar
 */
.daisy-ui .rangeSlider .rangeBar {
  height: 1.4em;
  top: .25em;
  translate:  0 -50%;
}

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

.daisy-ui .rangeSlider.range.min .rangeBar {
  border-radius: 100px 0 0 100px;
}

.daisy-ui .rangeSlider.range.max .rangeBar {
  border-radius: 0 100px 100px 0;
}

/** 
 * Handles / Floats
 */
.daisy-ui .rangeSlider .rangeNub,
.daisy-ui .rangeSlider.focus .rangeNub {
  background: white;
  border: 3px solid var(--handleBg);
}

.daisy-ui .rangeSlider .rangeFloat {
  border-radius: 2em;
  min-width: 2em;
}

.daisy-ui .rangeSlider.range .rangeFloat {
  left: 0;
  transform: translateX(100%);
}

/* float position on the first handle (or min-range slider) */
.daisy-ui .rangeSlider.range.min .rangeFloat,
.daisy-ui .rangeSlider.range.min:hover .rangeFloat,
.daisy-ui .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2) .rangeFloat,
.daisy-ui .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2):hover .rangeFloat {
  left: auto;
  right: 0;
  transform: translateX(-1.5em);
  background: transparent;
}

/* float position on the second handle (or max-range slider) */
.daisy-ui .rangeSlider.range.max .rangeFloat,
.daisy-ui .rangeSlider.range.max:hover .rangeFloat,
.daisy-ui .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1) .rangeFloat,
.daisy-ui .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1):hover .rangeFloat {
  left: 0;
  transform: translateX(1.5em);
  background: transparent;
}

/* flip the float position on the first handle when range is < 20 */
.daisy-ui.minFlip .rangeSlider.range.min .rangeFloat,
.daisy-ui.minFlip .rangeSlider.range.min:hover .rangeFloat,
.daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2) .rangeFloat,
.daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2):hover .rangeFloat {
  left: 0;
  transform: translateX(1.75em);
  background: var(--handleBg);
}

/* flip the float position on the second handle when range is > 80 */
.daisy-ui.maxFlip .rangeSlider.range.max .rangeFloat,
.daisy-ui.maxFlip .rangeSlider.range.max:hover .rangeFloat,
.daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1) .rangeFloat,
.daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1):hover .rangeFloat {
  left: auto;
  right: 0;
  transform: translateX(-1.75em);
  background: var(--handleBg);
}

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

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

.daisy-ui .rangeSlider .pip.selected,
.daisy-ui .rangeSlider .pip.in-range {
  width: 3px;
  background: var(--handleBg);
  translate: -1px -1px;
}

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