Slider

Slider lets users select a value or range along a track. It supports discrete marks, formats for value labels, vertical orientation, RTL, and integrates with the sl styling system (our global styling prop).

Demo

Value: 40

0255075100

Variants

Range, marks & discrete

Range: 20 – 70

0MidMax02040608010050

Vertical, inverted & RTL

Vertical

Inverted track

RTL

Styling with sl

Use design tokens with the sl prop to tweak spacing, colors, radii, and more.

Usage

TypeScript

import React from 'react';
import { Slider } from '@libdev-ui/base';

export default function Example() {
  const [value, setValue] = React.useState<[number, number]>([25, 60]);
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Slider
        value={value}
        onChange={(_, v) => Array.isArray(v) && setValue(v)}
        min={0}
        max={100}
        step={5}
        marks={[{ value: 0, label: '0' }, { value: 50, label: 'Mid' }, { value: 100, label: 'Max' }]}
        valueLabelDisplay="auto"
        valueLabelFormat={(v) => `${v}%`}
        size="md"
        variant="filled"
        color="primary"
        thumbPulse
        motionEnabled
        ls={{ width: 460 }}
      />
    </div>
  );
}

JavaScript

import React from 'react';
import { Slider } from '@libdev-ui/base';

export default function Example() {
  const [value, setValue] = React.useState([25, 60]);
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Slider
        value={value}
        onChange={(_, v) => Array.isArray(v) && setValue(v)}
        min={0}
        max={100}
        step={5}
        marks={[{ value: 0, label: '0' }, { value: 50, label: 'Mid' }, { value: 100, label: 'Max' }]}
        valueLabelDisplay="auto"
        valueLabelFormat={(v) => `${v}%`}
        size="md"
        variant="filled"
        color="primary"
        thumbPulse
        motionEnabled
        ls={{ width: 460 }}
      />
    </div>
  );
}

Props

Slider

Prop	Type	Default	Description
value	number | [number, number]		Controlled value; use an array for range
defaultValue	number | [number, number]		Uncontrolled initial value
min	number	0	Minimum value
max	number	100	Maximum value
step	number | null	1	When null, thumbs snap only to marks
shiftStep	number	10	PageUp/PageDown and Shift+Arrow step
disabled	boolean	false	Disable interactions
disableSwap	boolean	false	Prevent thumbs from swapping in range mode
size	'sm' | 'md' | 'lg' | string	'md'	Visual size token
variant	'filled' | 'outlined' | 'ghost' | string	'filled'	Visual variant
color	token | string	'primary'	Color token or any CSS color
orientation	'horizontal' | 'vertical'	'horizontal'	Orientation of the component
track	'normal' | 'inverted' | false	'normal'	Track presentation mode
isRtl	boolean	false	RTL rendering (temporary prop)
marks	boolean | Array<{value:number,label?:React.ReactNode}>	false	Discrete marks
valueLabelDisplay	'auto' | 'on' | 'off'	'off'	When to display the value label
valueLabelFormat	(value:number, index:number) => React.ReactNode | string		Label formatter
getAriaLabel	(index:number) => string		A11y label generator for thumbs
getAriaValueText	(value:number, index:number) => string		A11y value text
name	string		Name of the hidden input(s) for forms
tabIndex	number		Tab index for focusable elements
component	ElementType		Root override
slots	Partial<Record<SlotName, ElementType>>		Slot component overrides
slotProps	Partial<Record<SlotName, HTMLAttributes>>		Props per slot
sl	SlProp		System styling — tokens, responsive objects
ls	CommonLayoutProps		Layout props applied to the root
className	string		Root className
style	CSSProperties		Inline styles
dir	'ltr' | 'rtl'		Direction override
motionEnabled	boolean	true	Enables micro-animations (tooltip fade, track smoothness)
motionSpeed	'slow' | 'normal' | 'fast'	'normal'	Visual speed preset (reserved for fine tuning)
thumbPulse	boolean	false	Pulse animation on active/hovered thumb

Notes

• Set step={null} to restrict movement to marks.
• In range mode, pass [minValue, maxValue] to value/defaultValue.
• Use ls for layout (width/height/margins) and sl for design tokens and responsive styling.
• RTL can be enabled via dir="rtl" per instance or globally in your app.