# Slider

Capture input from a range of values.

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<Slider defaultValue={[50]}>
			<Slider.Label>Label</Slider.Label>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
			<Slider.MarkerGroup>
				<Slider.Marker value={25} />
				<Slider.Marker value={50} />
				<Slider.Marker value={75} />
			</Slider.MarkerGroup>
		</Slider>
	);
}

```

## Color

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Color() {
	return (
		<div className="space-y-8 w-full">
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range className="bg-primary-500" />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range className="bg-secondary-500" />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range className="bg-tertiary-500" />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
		</div>
	);
}

```

## Disabled

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Disabled() {
	return (
		<Slider defaultValue={[50]} disabled>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
		</Slider>
	);
}

```

## Readonly

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Readonly() {
	return (
		<Slider defaultValue={[50]} readOnly>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
		</Slider>
	);
}

```

## Multiple Thumbs

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function MultipleThumbs() {
	return (
		<Slider defaultValue={[25, 75]}>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
				<Slider.Thumb index={1}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
		</Slider>
	);
}

```

## Direction

```tsx
import { Slider } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		<Slider defaultValue={[50]} dir="rtl">
			<Slider.Label>Label</Slider.Label>
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb index={0}>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
			<Slider.MarkerGroup>
				<Slider.Marker value={25} />
				<Slider.Marker value={50} />
				<Slider.Marker value={75} />
			</Slider.MarkerGroup>
		</Slider>
	);
}

```

## API Reference

### SliderRootProps

| Property               | Default      | Type                                                                                                                                                                                                                                    | Description                                                                                                                                                                                                                                                                                                          |
| ---------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.&#xA;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.&#xA;&#xA;\`minStepsBetweenThumbs\` \* \`step\` should reflect the gap between the thumbs.&#xA;&#xA;- \`step: 1\` and \`minStepsBetweenThumbs: 10\` => gap is \`10\`&#xA;- \`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&#xA;to the thumb for single values.&#xA;- "start": Useful when the value represents an absolute value&#xA;- "center": Useful when the value represents an offset (relative)&#xA;- "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&#xA;- \`center\`: the thumb will extend beyond the bounds of the slider track.&#xA;- \`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                                                                                                                                                                                                                                                                                          |

### SliderRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | SliderApi\<PropTypes>                                          | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderRootContextProps

| Property | Default | Type                                         | Description |
| -------- | ------- | -------------------------------------------- | ----------- |
| children | -       | (slider: SliderApi\<PropTypes>) => ReactNode | -           |

### SliderLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### SliderValueTextProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"output">) => Element) \| undefined | Render the element yourself |

### SliderControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderTrackProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderRangeProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderThumbProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| index    | -       | number                                                         | -                           |
| name?    | -       | string \| undefined                                            | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### SliderMarkerGroupProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### SliderMarkerProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | number                                                         | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |