---
url: "https://vueda.dev/v3/reference/theming/keys/Slider.md"
title: "Slider"
---
# 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](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/api/vue/Slider.md)
| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Slider.md#theme-key-Slider-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](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-Slider-track) | 2 classes | The neutral channel that the [Slider.range](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-Slider-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](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-Slider-thumb) | 2 classes | The drag handle painted on top of [Slider.track](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-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:
```text
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](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-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:
```text
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](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-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](/v3/reference/theming/keys/Slider.md#theme-key-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:
```text
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`