Slider

The Slider component allows users to select a value or range of values from a predefined range. It provides both single-value and range selection capabilities.

Single Slider

The basic slider allows users to select a single value within a specified range.

<Slider label="Basic Slider" min={0} max={100} step={1} value={50} />

Range Slider

The range slider allows users to select a range of values within specified bounds.

<RangeSlider label="Range Slider" min={0} max={100} step={1} values={[25, 75]} />

Props

Slider Props

Prop	Type	Default	Description
value	number	0	The current value of the slider
min	number	0	The minimum value of the slider
max	number	100	The maximum value of the slider
step	number	1	The step interval of the slider
disabled	boolean	false	Whether the slider is disabled
size	'sm' \| 'md' \| 'lg'	'md'	The size of the slider
label	string	''	The label text for the slider
showValue	boolean	false	Whether to show the current value
marks	{ value: number; label: string }[]	[]	Array of marks to display on the slider
formatValue	(value: number) => string	(v) => v.toString()	Function to format the displayed value

RangeSlider Props

Prop	Type	Default	Description
values	[number, number]	[0, 100]	The current range values of the slider
min	number	0	The minimum value of the slider
max	number	100	The maximum value of the slider
step	number	1	The step interval of the slider
disabled	boolean	false	Whether the slider is disabled
size	'sm' \| 'md' \| 'lg'	'md'	The size of the slider
label	string	''	The label text for the slider
showValues	boolean	false	Whether to show the current values
marks	{ value: number; label: string }[]	[]	Array of marks to display on the slider
formatValue	(value: number) => string	(v) => v.toString()	Function to format the displayed values

Features

Value Display

You can show the current value(s) of the slider using the showValue/showValues prop.

<Slider label="With Value" min={0} max={100} step={1} value={50} showValue={true} />
<RangeSlider label="With Values" min={0} max={100} step={1} values={[25, 75]} showValues={true} />

Marks

Add marks to indicate specific values on the slider.

<Slider 
    label="With Marks" 
    min={0} 
    max={100} 
    step={25} 
    value={50} 
    marks={[
        { value: 0, label: '0' },
        { value: 25, label: '25' },
        { value: 50, label: '50' },
        { value: 75, label: '75' },
        { value: 100, label: '100' }
    ]} 
/>

Custom Value Formatting

You can customize how values are displayed using the formatValue prop.

<Slider 
    label="Percentage" 
    min={0} 
    max={100} 
    step={1} 
    value={75} 
    showValue={true} 
    formatValue={(v) => `${v}%`} 
/>

Different Sizes

The slider comes in three sizes: small, medium (default), and large.

<Slider label="Small" min={0} max={100} step={1} value={50} size="sm" />
<Slider label="Medium" min={0} max={100} step={1} value={50} size="md" />
<Slider label="Large" min={0} max={100} step={1} value={50} size="lg" />

Disabled State

You can disable the slider using the disabled prop.

<Slider label="Disabled" min={0} max={100} step={1} value={50} disabled={true} />
<RangeSlider label="Disabled Range" min={0} max={100} step={1} values={[25, 75]} disabled={true} />

Accessibility

The slider components are built with accessibility in mind:

• Keyboard navigation support (arrow keys, Home, End)
• ARIA attributes for screen readers
• Focus management
• Touch and mouse interaction support

Best Practices

1. Always provide a meaningful label for the slider
2. Use appropriate step values based on the use case
3. Consider using marks for important values
4. Use the formatValue prop to make values more meaningful
5. Choose the appropriate size based on your UI context
6. Consider using the range slider when users need to select a range of values