Slider

import Slider from "@shpaw415/mui-lite/Slider";

Why use it

Slider selects a numeric value or range by dragging. Use for volume, price filters, and continuous settings where typing a number is clumsy.

Demo

Basic

With value tooltips

Always show label

Show label while dragging

Range with tooltips

Example

import Slider from "@shpaw415/mui-lite/Slider";
 
<Slider min={0} max={100} defaultValue={30} onChange={console.log} />
<Slider defaultValue={[20, 80]} />

With tooltips (value labels)

Show the current value above the thumb with toolTip and valueLabelDisplay:

on — label always visible
auto — label while dragging (and optionally on hover)
valueLabelFormat — format the number (e.g. $ or %)

import Slider from "@shpaw415/mui-lite/Slider";
 
// Always show the value
<Slider
  defaultValue={40}
  toolTip
  valueLabelDisplay="on"
  aria-label="Volume"
/>
 
// Show while dragging, with a custom format
<Slider
  defaultValue={55}
  toolTip
  valueLabelDisplay="auto"
  valueLabelFormat={(v) => `${v}%`}
  aria-label="Brightness"
/>
 
// Range filter with currency labels
<Slider
  defaultValue={[25, 75]}
  toolTip
  valueLabelDisplay="auto"
  valueLabelFormat={(v) => `$${v}`}
  min={0}
  max={100}
  onChange={(values) => setPriceRange(values)}
/>

Props

Prop	Type	Default
min / max / step	number	0 / 100 / 1
value / defaultValue	number \| number[]	—
onChange	(values: number[]) => void	—
toolTip	boolean	false
valueLabelDisplay	on \| auto \| off	off
valueLabelFormat	(value: number) => string \| number	—