# 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

### 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?               | -            | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                                                                                                                                        | Render the element yourself                                                                                                                                                                                                                                                                                          |

### SliderRootProviderProps

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

### SliderRootContextProps

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

### SliderLabelProps

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

### SliderValueTextProps

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

### SliderControlProps

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

### SliderTrackProps

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

### SliderRangeProps

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

### SliderThumbProps

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

### SliderHiddenInputProps

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

### SliderMarkerGroupProps

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

### SliderMarkerProps

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