shadcn Svelte滑块Thumb内添加文本失效，求解决方案

问题原因 #

Bits UI的SliderPrimitive.Thumb组件默认会渲染预设的span元素，且不会将内部子元素传递到最终DOM结构中，导致你添加的<span>Drag</span>被自动剥离。

解决方案 #

放弃使用SliderPrimitive.Thumb组件，直接利用thumbs数组中每个thumb对象的属性，渲染自定义的Thumb元素，这样就能自由添加子内容：

修改后的完整代码：

<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}
    <!-- 直接绑定thumb的属性到自定义元素，保留子内容 -->
    <span
      {...thumb}
      class={cn(
        "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"
      )}
    >
      <span class="z-10 text-black">Drag</span>
    </span>
  {/each}
</SliderPrimitive.Root>

原理说明 #

thumbs数组中的每个thumb对象包含了滑块所需的所有ARIA属性、事件绑定和定位样式，直接将这些属性绑定到自定义span元素上，既能实现原SliderPrimitive.Thumb的全部功能，又能自由添加自定义子内容。

内容的提问来源于stack exchange，提问作者Coder Dad