# Slider
Capture input from a range of values.
```tsx
import { Slider } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
Label
);
}
```
## Color
```tsx
import { Slider } from '@skeletonlabs/skeleton-react';
export default function Color() {
return (
);
}
```
## Disabled
```tsx
import { Slider } from '@skeletonlabs/skeleton-react';
export default function Disabled() {
return (
);
}
```
## Readonly
```tsx
import { Slider } from '@skeletonlabs/skeleton-react';
export default function Readonly() {
return (
);
}
```
## Multiple Thumbs
```tsx
import { Slider } from '@skeletonlabs/skeleton-react';
export default function MultipleThumbs() {
return (
);
}
```
## Direction
```tsx
import { Slider } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Label
);
}
```
## API Reference
| Property | Default | Type |
| --------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ids | - | Partial\<\{ root: string; thumb: (index: number) => string; hiddenInput: (index: number) => string; control: string; track: string; range: string; label: string; valueText: string; marker: (index: number) => string; }> \| undefined — The ids of the elements in the slider. Useful for composition. |
| aria-label | - | string\[] \| undefined — The aria-label of each slider thumb. Useful for providing an accessible name to the slider |
| aria-labelledby | - | string\[] \| undefined — The \`id\` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider |
| name | - | string \| undefined — The name associated with each slider thumb (when used in a form) |
| form | - | string \| undefined — The associate form of the underlying input element. |
| value | - | number\[] \| undefined — The controlled value of the slider |
| defaultValue | - | number\[] \| undefined — The initial value of the slider when rendered.
Use when you don't need to control the value of the slider. |
| disabled | - | boolean \| undefined — Whether the slider is disabled |
| readOnly | - | boolean \| undefined — Whether the slider is read-only |
| invalid | - | boolean \| undefined — Whether the slider is invalid |
| onValueChange | - | ((details: ValueChangeDetails) => void) \| undefined — Function invoked when the value of the slider changes |
| onValueChangeEnd | - | ((details: ValueChangeDetails) => void) \| undefined — Function invoked when the slider value change is done |
| onFocusChange | - | ((details: FocusChangeDetails) => void) \| undefined — Function invoked when the slider's focused index changes |
| getAriaValueText | - | ((details: ValueTextDetails) => string) \| undefined — Function that returns a human readable value for the slider thumb |
| min | 0 | number \| undefined — The minimum value of the slider |
| max | 100 | number \| undefined — The maximum value of the slider |
| step | 1 | number \| undefined — The step value of the slider |
| minStepsBetweenThumbs | 0 | number \| undefined — The minimum permitted steps between multiple thumbs.
\`minStepsBetweenThumbs\` \* \`step\` should reflect the gap between the thumbs.
- \`step: 1\` and \`minStepsBetweenThumbs: 10\` => gap is \`10\`
- \`step: 10\` and \`minStepsBetweenThumbs: 2\` => gap is \`20\` |
| orientation | "horizontal" | "vertical" \| "horizontal" \| undefined — The orientation of the slider |
| origin | "start" | "start" \| "center" \| "end" \| undefined — The origin of the slider range. The track is filled from the origin
to the thumb for single values.
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative)
- "end": Useful when the value represents an offset from the end |
| thumbAlignment | "contain" | "center" \| "contain" \| undefined — The alignment of the slider thumb relative to the track
- \`center\`: the thumb will extend beyond the bounds of the slider track.
- \`contain\`: the thumb will be contained within the bounds of the track. |
| thumbSize | - | \{ width: number; height: number; } \| undefined — The slider thumbs dimensions |
| dir | "ltr" | "ltr" \| "rtl" \| undefined — The document's text/writing direction. |
| getRootNode | - | (() => ShadowRoot \| Node \| Document) \| undefined — A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | SliderApi\ |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | (slider: SliderApi\) => ReactNode |
| element | - | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"output">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| index | - | number |
| name | - | string \| undefined |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | number |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |