Slider · Skeleton

Label

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>
	);
}

Label

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

Change the track, range, and thumb color using utility classes or custom CSS variables to match your design system.

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 className="bg-primary-50-950">
						<Slider.Range className="bg-primary-500" />
					</Slider.Track>
					<Slider.Thumb index={0} className="ring-primary-500">
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track className="bg-secondary-50-950">
						<Slider.Range className="bg-secondary-500" />
					</Slider.Track>
					<Slider.Thumb index={0} className="ring-secondary-500">
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
			<Slider defaultValue={[50]}>
				<Slider.Control>
					<Slider.Track className="bg-tertiary-50-950">
						<Slider.Range className="bg-tertiary-500" />
					</Slider.Track>
					<Slider.Thumb index={0} className="ring-tertiary-500">
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
		</div>
	);
}

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 class="bg-primary-50-950">
				<Slider.Range class="bg-primary-500" />
			</Slider.Track>
			<Slider.Thumb index={0} class="ring-primary-500">
				<Slider.HiddenInput />
			</Slider.Thumb>
		</Slider.Control>
	</Slider>

	<Slider defaultValue={[50]}>
		<Slider.Control>
			<Slider.Track class="bg-secondary-50-950">
				<Slider.Range class="bg-secondary-500" />
			</Slider.Track>
			<Slider.Thumb index={0} class="ring-secondary-500">
				<Slider.HiddenInput />
			</Slider.Thumb>
		</Slider.Control>
	</Slider>

	<Slider defaultValue={[50]}>
		<Slider.Control>
			<Slider.Track class="bg-tertiary-50-950">
				<Slider.Range class="bg-tertiary-500" />
			</Slider.Track>
			<Slider.Thumb index={0} class="ring-tertiary-500">
				<Slider.HiddenInput />
			</Slider.Thumb>
		</Slider.Control>
	</Slider>
</div>

Disabled

Set the disabled prop to enable the disabled state.

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>
	);
}

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>

Read-Only

Set the readOnly prop to enable the disabled state.

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>
	);
}

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

Set a value array of two values to enable start and end 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>
	);
}

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

Set the text direction ( ltr or rtl ) using the dir prop.

Label

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>
	);
}

Label

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>

Anatomy

Here’s an overview of how the Slider component is structured in code:

tsx

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

export default function Anatomy() {
	return (
		<Slider>
			<Slider.Label />
			<Slider.Control>
				<Slider.Track>
					<Slider.Range />
				</Slider.Track>
				<Slider.Thumb>
					<Slider.HiddenInput />
				</Slider.Thumb>
			</Slider.Control>
			<Slider.MarkerGroup>
				<Slider.Marker />
			</Slider.MarkerGroup>
			<Slider.ValueText />
		</Slider>
	);
}

svelte

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

<Slider>
	<Slider.Label />
	<Slider.Control>
		<Slider.Track>
			<Slider.Range />
		</Slider.Track>
		<Slider.Thumb>
			<Slider.HiddenInput />
		</Slider.Thumb>
	</Slider.Control>
	<Slider.MarkerGroup>
		<Slider.Marker />
	</Slider.MarkerGroup>
	<Slider.ValueText />
</Slider>

API Reference

Root

Prop	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
`thumbCollisionBehavior`	"none"	"none" \| "push" \| "swap" \| undefined Controls how thumbs behave when they collide during pointer interactions. - `none` (default): Thumbs cannot move past each other; excess movement is ignored. - `push`: Thumbs push each other without restoring their previous positions when dragged back. - `swap`: Thumbs swap places when dragged past each other.
`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

Provider

Prop	Default	Type
`value`	—	SliderApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(slider: SliderApi<PropTypes>) => ReactNode

Label

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"label">) => Element) \| undefined Render the element yourself

ValueText

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"output">) => Element) \| undefined Render the element yourself

Control

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Track

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Range

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Thumb

Prop	Default	Type
`index`	—	number
`name`	—	string \| undefined
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

HiddenInput

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"input">) => Element) \| undefined Render the element yourself

MarkerGroup

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Marker

Prop	Default	Type
`value`	—	number
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Root

Prop	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
`thumbCollisionBehavior`	"none"	"none" \| "push" \| "swap" \| undefined Controls how thumbs behave when they collide during pointer interactions. - `none` (default): Thumbs cannot move past each other; excess movement is ignored. - `push`: Thumbs push each other without restoring their previous positions when dragged back. - `swap`: Thumbs swap places when dragged past each other.
`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

Provider

Prop	Default	Type
`value`	—	() => SliderApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => SliderApi<PropTypes>]>

Label

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

ValueText

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"output">]> \| undefined Render the element yourself

Control

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Track

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Range

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Thumb

Prop	Default	Type
`index`	—	number
`name`	—	string \| undefined
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

HiddenInput

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself

MarkerGroup

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Marker

Prop	Default	Type
`value`	—	number
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself