# Slider
Capture input from a range of values.

```svelte
<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<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

```svelte
<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="space-y-8 w-full">
	<Slider defaultValue={[50]}>
		<Slider.Control>
			<Slider.Track>
				<Slider.Range class="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 class="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 class="bg-tertiary-500" />
			</Slider.Track>
			<Slider.Thumb index={0}>
				<Slider.HiddenInput />
			</Slider.Thumb>
		</Slider.Control>
	</Slider>
</div>

```

## Disabled

```svelte
<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<Slider defaultValue={[50]} disabled>
	<Slider.Control>
		<Slider.Track>
			<Slider.Range />
		</Slider.Track>
		<Slider.Thumb index={0}>
			<Slider.HiddenInput />
		</Slider.Thumb>
	</Slider.Control>
</Slider>

```

## Readonly

```svelte
<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<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

```svelte
<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<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

```svelte
<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<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

### SliderRoot

| Property | 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. 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` | number | undefined | The minimum value of the slider Default: 0 |
| `max` | number | undefined | The maximum value of the slider Default: 100 |
| `step` | number | undefined | The step value of the slider Default: 1 |
| `minStepsBetweenThumbs` | 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` Default: 0 |
| `orientation` | "vertical" | "horizontal" | undefined | The orientation of the slider Default: "horizontal" |
| `origin` | "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 Default: "start" |
| `thumbAlignment` | "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. Default: "contain" |
| `thumbSize` | { width: number; height: number; } | undefined | The slider thumbs dimensions |
| `dir` | "ltr" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | (() => ShadowRoot | Node | Document) | undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### SliderRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | () => SliderApi<PropTypes> |  |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### SliderRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | Snippet<[() => SliderApi<PropTypes>]> |  |

### SliderLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"label">]> | undefined | Render the element yourself |

### SliderValueText

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"output">]> | undefined | Render the element yourself |

### SliderControl

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### SliderTrack

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### SliderRange

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### SliderThumb

| Property | Type | Description |
| --- | --- | --- |
| `index`* | number |  |
| `name` | string | undefined |  |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### SliderHiddenInput

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"input">]> | undefined | Render the element yourself |

### SliderMarkerGroup

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |

### SliderMarker

| Property | Type | Description |
| --- | --- | --- |
| `value`* | number |  |
| `element` | Snippet<[HTMLAttributes<"div">]> | undefined | Render the element yourself |