Slider

Numeric slider. Shows a value bubble on hover/drag (tooltip, formattable with formatTooltip); marks label points on the track.

Volume

With marks

0%50%100%


import { Slider } from '@gg-software/ui';
 
<Slider label="Volume" defaultValue={40} />
 
<Slider
    label="With marks"
    step={25}
    marks={[
        { value: 0, label: '0%' },
        { value: 50, label: '50%' },
        { value: 100, label: '100%' },
    ]}
/>
 
<Slider value={amount} onChange={(value) => setAmount(value)} formatTooltip={(v) => `${v} px`} />

Props

Prop	Type	Default	Description
`value`	`number`	—
`defaultValue`	`number`	—
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`onChange`	`((value: number) => void)`	—
`disabled`	`boolean`	`false`
`marks`	`SliderMark[]`	—
`tooltip`	`boolean`	`true`	show the value bubble on hover / focus / drag (default true)
`formatTooltip`	`((value: number) => ReactNode)`	—
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`className`	`string`	—
`id`	`string`	—
`aria-label`	`string`	—

* required · generated from packages/ui/src/input/Slider/Slider.tsx

Types


type SliderMark = {
    value: number;
    label?: ReactNode;
};