Slider

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

export const Page: React.FC = () => {
	const [value, setValue] = useState([40]);

	return <Slider name="example" value={value} onValueChange={setValue} />;
};

Multiple Handles

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

export const Page: React.FC = () => {
	const [valueMulti, setValueMulti] = useState([40, 60]);

	return <Slider value={valueMulti} onValueChange={setValueMulti} />;
};

Markers

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

export const Page: React.FC = () => {
	const [value, setValue] = useState([40]);

	return <Slider value={value} onValueChange={setValue} markers={[25, 50, 75]} />;
};

Height & Size

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

export const Page: React.FC = () => {
	const [value, setValue] = useState([40]);

	return (
		<div className="w-full space-y-8">
			<Slider name="value" value={value} onValueChange={setValue} height="h-1" />
			<Slider name="value" value={value} onValueChange={setValue} height="h-6" thumbSize="size-8" />
		</div>
	);
};

Colors

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

export const Page: React.FC = () => {
	const [value, setValue] = useState([40]);

	return (
		<div className="w-full space-y-8">
			<Slider value={value} onValueChange={setValue} meterBg="bg-primary-500" thumbRingColor="ring-primary-500" />
			<Slider value={value} onValueChange={setValue} meterBg="bg-secondary-500" thumbRingColor="ring-secondary-500" />
			<Slider value={value} onValueChange={setValue} meterBg="bg-tertiary-500" thumbRingColor="ring-tertiary-500" />
		</div>
	);
};

State

Disabled

Read-Only

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

export const Page: React.FC = () => {
	const [value, setValue] = useState([40]);

	return (
		<div className="w-full space-y-4">
			<p>Disabled</p>
			<Slider name="value" value={value} onValueChange={setValue} disabled />
			<p>Read-Only</p>
			<Slider name="value" value={value} onValueChange={setValue} readOnly />
		</div>
	);
};

RTL

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

export const Page: React.FC = () => {
	const [value, setValue] = useState([40]);
	const [valueMulti, setValueMulti] = useState([40, 60]);

	return (
		<div className="w-full space-y-8">
			<Slider value={value} onValueChange={setValue} dir="rtl" />
			<Slider value={valueMulti} onValueChange={setValueMulti} dir="rtl" />
		</div>
	);
};

Usage Within Forms

Make sure to add a unique name property.

API Reference

Property	Type	Description
`markers`	array	Provide an array of value markers
`height`	string	Set height classes for the overall slider.
`base`	string	Set base classes.
`classes`	string	Provide arbitrary classes for the root.
`controlBase`	string	Set base classes for the control.
`controlClasses`	string	Provide arbitrary classes for the control.
`trackBase`	string	Set base classes for the track.
`trackBg`	string	Set background classes for the track.
`trackRounded`	string	Set border radius classes for the track.
`trackClasses`	string	Provide arbitrary classes for the track.
`meterBase`	string	Set base classes for the meter.
`meterBg`	string	Set background classes for the meter.
`materRounded`	string	Set border radius classes for the meter.
`meterClasses`	string	Provide arbitrary classes for the meter.
`thumbBase`	string	Set base classes for the thumb.
`thumbSize`	string	Set size classes for the thumb.
`thumbBg`	string	Set background classes for the thumb.
`thumbRingSize`	string	Set ring size classes for the thumb.
`thumbRingColor`	string	Set ring color classes for the thumb.
`thumbRounded`	string	Set border-radius classes for the thumb.
`thumbScale`	string	Set scale classes for the thumb.
`thumbCursor`	string	Set cursor classes for the thumb.
`thumbClasses`	string	Provide arbitrary classes for the thumb.
`markersBase`	string	Set base classes for the markers.
`markerslasses`	string	Provide arbitrary classes for the markers.
`markBase`	string	Set base classes for each mark.
`markText`	string	Set text size classes for each mark.
`markOpacity`	string	Set opacity classes for each mark.
`markClasses`	string	Provide arbitrary classes for each mark.
`stateDisabled`	string	Set disabled state classes for the root element.
`stateReadOnly`	string	Set read-only state classes for the root element.
`onValueChange`	object	Triggers when the value state is being changed.
`onValueChangeEnd`	object	Triggers when the value change has ended.
`mark`	React.ReactNode	Replace numeric markers with symbol, such as a icon.
`max`	number	The maximum value of the slider Default: 100
`origin`	string	The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) Default: start
`name`	string	The name associated with each slider thumb (when used in a form)
`min`	number	The minimum value of the slider Default: 0
`value`	array	The value of the range slider
`form`	string	The associate form of the underlying input element.
`dir`	string	The document's text/writing direction. Default: ltr
`invalid`	boolean	Whether the slider is invalid
`getRootNode`	object	A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`disabled`	boolean	Whether the slider is disabled
`orientation`	string	The orientation of the slider Default: horizontal
`step`	number	The step value of the slider Default: 1
`aria-label`	array	The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`	array	The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`ids`	Partial<...>	The ids of the elements in the range slider. Useful for composition.
`readOnly`	boolean	Whether the slider is read-only
`onFocusChange`	object	Function invoked when the slider's focused index changes
`getAriaValueText`	object	Function that returns a human readable value for the slider thumb
`minStepsBetweenThumbs`	number	The minimum permitted steps between multiple thumbs. Default: 0
`thumbAlignment`	string	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