Slider

Source: client/lib/theme/vueda-tailwind/controls/index.js

The continuous-value control surface. Flex row by default; data-[orientation=vertical] flips to flex column and applies a 176px (min-h-44) minimum height so a vertical slider has enough travel to be precise. touch-none and select-none so dragging the Slider.thumb does not scroll the page or initiate a text selection. data-[disabled]:opacity-50 is the disabled signal; pointer events are blocked at the Reka primitive level above this slot, so no cursor-not-allowed is needed on the root.

Vue component: Slider

Slot	Default classes	Description
root	2 classes	The continuous-value control surface. Flex row by default; data-[orientation=vertical] flips to flex column and applies a 176px (min-h-44) minimum height so a vertical slider has enough travel to be precise. touch-none and select-none so dragging the Slider.thumb does not scroll the page or initiate a text selection. data-[disabled]:opacity-50 is the disabled signal; pointer events are blocked at the Reka primitive level above this slot, so no cursor-not-allowed is needed on the root.
track	2 classes	The neutral channel that the Slider.range fills against. bg-muted so it reads as inert chrome behind the active fill; 6px thick (h-1.5 horizontal, w-1.5 vertical) at pill radius so the ends round into the Slider.thumb. overflow-hidden clips the range fill to the rounded ends so the active portion meets the track corners cleanly.
range	bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full	The active fill between the track origin and the current Slider.thumb position. bg-primary makes the slider's selected portion read as the same selection tone as the rest of the form family. Absolutely positioned inside Slider.track and sized 100% on the cross-axis so it always paints the full track thickness regardless of orientation.
thumb	2 classes	The drag handle painted on top of Slider.track. 16px circle on a white fill with a 1px --primary border so the knob reads as tactile and grabbable against any palette. hover:ring-4 and focus-visible:ring-4 paint a 4px --ring/50 halo at the slider's scale, with outline-hidden suppressing the default browser focus outline so the halo is the only focus paint; the canon focus-ring utility is skipped here because the offset-outline variant would extend outside the track and clip against the surrounding layout. Multiple thumbs render when the model value is an array, giving a two-handle range.

root

The continuous-value control surface. Flex row by default; data-[orientation=vertical] flips to flex column and applies a 176px (min-h-44) minimum height so a vertical slider has enough travel to be precise. touch-none and select-none so dragging the Slider.thumb does not scroll the page or initiate a text selection. data-[disabled]:opacity-50 is the disabled signal; pointer events are blocked at the Reka primitive level above this slot, so no cursor-not-allowed is needed on the root.

Default classes:

relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50
data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col

Source: client/lib/theme/vueda-tailwind/controls/Slider.theme.js:17

track

The neutral channel that the Slider.range fills against. bg-muted so it reads as inert chrome behind the active fill; 6px thick (h-1.5 horizontal, w-1.5 vertical) at pill radius so the ends round into the Slider.thumb. overflow-hidden clips the range fill to the rounded ends so the active portion meets the track corners cleanly.

Default classes:

bg-muted relative grow overflow-hidden rounded-full
data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5

Source: client/lib/theme/vueda-tailwind/controls/Slider.theme.js:27

range

The active fill between the track origin and the current Slider.thumb position. bg-primary makes the slider's selected portion read as the same selection tone as the rest of the form family. Absolutely positioned inside Slider.track and sized 100% on the cross-axis so it always paints the full track thickness regardless of orientation.

Default classes:

bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full

Source: client/lib/theme/vueda-tailwind/controls/Slider.theme.js:37

thumb

The drag handle painted on top of Slider.track. 16px circle on a white fill with a 1px --primary border so the knob reads as tactile and grabbable against any palette. hover:ring-4 and focus-visible:ring-4 paint a 4px --ring/50 halo at the slider's scale, with outline-hidden suppressing the default browser focus outline so the halo is the only focus paint; the canon focus-ring utility is skipped here because the offset-outline variant would extend outside the track and clip against the surrounding layout. Multiple thumbs render when the model value is an array, giving a two-handle range.

Default classes:

bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow]
hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50

Source: client/lib/theme/vueda-tailwind/controls/Slider.theme.js:41