Slider

Label

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

<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

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

<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

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

<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

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

<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

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

<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

Label

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

<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

Root

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

RootProvider

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

RootContext

Property	Default	Type
`children`	-	Snippet<[() => SliderApi<PropTypes>]>

Label

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

ValueText

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

Control

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

Track

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

Range

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

Thumb

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

HiddenInput

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

MarkerGroup

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

Marker

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