Skeleton

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

Slider

Property	Type	Description
`markers`		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.
`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`		Triggers when the value state is being changed.
`onValueChangeEnd`		Triggers when the value change has ended.
`mark`	ReactNode	Replace numeric markers with symbol, such as a icon.
`ids`		The ids of the elements in the range slider. Useful for composition.
`aria-label`		The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`		The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`name`	string	The name associated with each slider thumb (when used in a form)
`form`	string	The associate form of the underlying input element.
`value`		The value of the range slider
`disabled`	boolean	Whether the slider is disabled
`readOnly`	boolean	Whether the slider is read-only
`invalid`	boolean	Whether the slider is invalid
`onFocusChange`		Function invoked when the slider's focused index changes
`getAriaValueText`		Function that returns a human readable value for the slider thumb
`min`	number	The minimum value of the slider Default: 0
`max`	number	The maximum value of the slider Default: 100
`step`	number	The step value of the slider Default: 1
`minStepsBetweenThumbs`	number	The minimum permitted steps between multiple thumbs. Default: 0
`orientation`	"vertical" \| "horizontal"	The orientation of the slider Default: "horizontal"
`origin`	"start" \| "center"	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"
`thumbAlignment`	"center" \| "contain"	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"
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.