Slider

/** @jsxImportSource @bext-stack/framework */
// src/components/ui/slider.tsx — draggable via the island (data-ui="slider")
export function Slider(o) {
  const v = Math.max(0, Math.min(100, o.value));
  return \`<div data-ui="slider" data-value="\${v}" class="relative flex w-full items-center \${o.class || ""}">
    <div class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20"><div data-ui="slider-range" class="absolute h-full bg-primary" style="width:\${v}%"></div></div>
    <span data-ui="slider-thumb" class="absolute block h-4 w-4 rounded-full border border-primary/50 bg-background shadow" style="left:calc(\${v}% - 8px)" tabindex="0"></span></div>\`;
}