Slider

<Slider
	value={value}
	onChange={(value) => setData(value)}
/>

Range slider

In order for the value display to be visible, a label must be set!

<Slider
	label='My slider'
	value={value} // e.g. [20, 60]
	onChange={(value) => setData(value)}
/>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Markers

Auto-generated

<Slider
	value={value}
	onChange={(value) => setData(value)}
	markers
/>

Dots

<Slider
	value={value}
	onChange={(value) => setData(value)}
	markers='dots'
/>

Manual

<Slider
	value={value}
	onChange={(value) => setData(value)}
	markers={{ 0: 'start', 25: '', 50: 'middle', 75: '', 100: 'end' }}
/>

Custom start point

<Slider
	value={value}
	onChange={(value) => setData(value)}
	startPoint={50}
/>

Disable the active area highlight

<Slider
	value={value}
	onChange={(value) => setData(value)}
	noActiveHighlight
/>

Custom track style

<Slider
	value={value}
	onChange={(value) => setData(value)}
	markers={{
		0: <span className='es-uic-text-red-500'>R</span>,
		50: <span className='es-uic-text-green-500'>G</span>,
		100: <span className='es-uic-text-blue-500'>B</span>,
	}}
	startPoint={50}
	noActiveHighlight
	trackStyle={{
		backgroundImage: 'linear-gradient(to right in oklab, #ff000060, #00ff0060, #0000ff60)',
	}}
/>

Before element

<Slider
	value={value}
	onChange={(value) => setData(value)}
	before={icons.magicAltFillTransparent}
/>

After element

<Slider
	value={value}
	onChange={(value) => setData(value)}
	after={icons.magicAltFillTransparent}
/>

Input field

Requires label!

Note

Use sparingly, the input methods are redundant.

<Slider
	label='My slider'
	value={value}
	onChange={(value) => setData(value)}
	inputField
/>

Vertical slider

<Slider
	value={value}
	onChange={(value) => setData(value)}
	vertical
/>