I am currently working on customizing a slider thumb for the shadcn svelte slider. I have tried adding a span within the SliderPrimitive.Thumb element, however, it seems like the span gets stripped before going live in the browser. I'm working with svelte, typescript, and tailwind css, and I'm fairly new to these languages and the shadcn svelte components. Any input and solutions are greatly appreciated!
<script lang="ts"> import { Slider as SliderPrimitive } from "bits-ui"; import { cn } from "$lib/utils.js"; type $$Props = SliderPrimitive.Props; let className: $$Props["class"] = undefined; export let value: $$Props["value"] = [0]; export { className as class };</script><SliderPrimitive.Root bind:value class={cn("flex w-full touch-none select-none items-center", className)} {...$$restProps} let:thumbs><span class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary"><SliderPrimitive.Range class="absolute h-full bg-primary" /></span> {#each thumbs as thumb}<SliderPrimitive.Thumb {thumb} class="block h-8 w-24 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" /> {/each}</SliderPrimitive.Root>