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. Disabled colors live on the track, range, and thumbs at full opacity; Reka blocks value changes and removes disabled thumbs from keyboard navigation.

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. Disabled colors live on the track, range, and thumbs at full opacity; Reka blocks value changes and removes disabled thumbs from keyboard navigation.
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. Disabled tracks use --disabled.
range	bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full data-[disabled]:bg-disabled-foreground	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. Disabled ranges use --disabled-foreground so the selected span remains visible.
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. Disabled thumbs use --disabled-foreground fill and border with no shadow or hover halo; their positions retain the value.

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. Disabled colors live on the track, range, and thumbs at full opacity; Reka blocks value changes and removes disabled thumbs from keyboard navigation.

Default classes:

relative flex w-full touch-none items-center select-none
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. Disabled tracks use --disabled.

Default classes:

bg-muted relative grow overflow-hidden rounded-full data-[disabled]:bg-disabled
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. Disabled ranges use --disabled-foreground so the selected span remains visible.

Default classes:

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

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. Disabled thumbs use --disabled-foreground fill and border with no shadow or hover halo; their positions retain the value.

Default classes:

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

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