slider

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type SliderValue = number | [number, number] | string
7type ThumbAlignment = "center" | "edge" | "edge-client-only"
8 
9type Props = HTMLAttributes<"div"> & {
10  defaultValue?: SliderValue
11  min?: number
12  max?: number
13  step?: number
14  largeStep?: number
15  orientation?: "horizontal" | "vertical"
16  thumbAlignment?: ThumbAlignment
17  disabled?: boolean
18}
19 
20const {
21  class: className,
22  defaultValue,
23  min,
24  max,
25  step,
26  largeStep,
27  orientation = "horizontal",
28  thumbAlignment = "edge",
29  disabled,
30  ...props
31} = Astro.props
32 
33const serializedDefaultValue = Array.isArray(defaultValue)
34  ? defaultValue.join(",")
35  : defaultValue
36const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
37---
38 
39<div
40  data-slot="slider"
41  data-default-value={serializedDefaultValue}
42  data-min={min}
43  data-max={max}
44  data-step={step}
45  data-large-step={largeStep}
46  data-orientation={orientation}
47  data-thumb-alignment={thumbAlignment}
48  data-disabled={disabled}
49  class={cn(
50    "relative flex touch-none items-center select-none data-disabled:opacity-50 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
51    className
52  )}
53  {...props}
54>
55  <div
56    data-slot="slider-control"
57    class="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
58  >
59    <div
60      data-slot="slider-track"
61      class="bg-muted relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
62    >
63      <div
64        data-slot="slider-range"
65        class="bg-primary rounded-full select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
66      >
67      </div>
68    </div>
69    {
70      Array.from({ length: thumbCount }).map(() => (
71        <div
72          data-slot="slider-thumb"
73          class="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
74// … truncated