A Slider allows the user to select values in a linear range of values.
| install | yarn add @clayui/slider |
|---|
| version |  |
|---|
| use | import Slider from '@clayui/slider'; |
|---|
Slider is a controlled component and needs just 2 props for its basic use, value and onChange.
import {Provider} from '@clayui/core';
import Slider from '@clayui/slider';
import React from 'react';
export default function App() {
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<div className="form-group">
<label htmlFor="slider">With Tooltip</label>
<Slider defaultValue={10} id="slider" />
</div>
</div>
</Provider>
);
}Range and Step
For a more specific use case you can specify other props, like min and max to determine the range, and step to specify how much the value changes.
import {Provider} from '@clayui/core';
import Slider from '@clayui/slider';
import React from 'react';
export default function App() {
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<div className="form-group">
<label htmlFor="slider">Decades</label>
<Slider defaultValue={10} id="slider" max={2020} step={10} />
</div>
</div>
</Provider>
);
}API Reference
Slider
({ className, defaultValue, disabled, max, min, onChange, onValueChange, showTooltip, step, tooltipPosition, value, ...otherProps }: IProps) => JSX.ElementParameters
Properties
defaultValue
number | undefined
Property to set the default value (uncontrolled).
disabled
boolean | undefined
Flag that will disable component features.
max
number | undefined= 100
Sets maximum permitted value.
Sets minimum permitted value
onChange
InternalDispatch<number> | undefined
Callback will always be called when the slider value changes (controlled).
DeprecatedonValueChange
InternalDispatch<number> | undefined
Callback will always be called when the slider value changes.
showTooltip
boolean | undefined= true
Flag to show tooltip or not.
step
number | undefined= 1
Sets stepping interval.
tooltipPosition
"top" | "bottom" | undefined= "top"
Set tooltip position.
Set the current value of the slider (controlled).
Returns
ElementEdit this page on GitHubContributors
Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko
Last edited May 9, 2025 at 6:15:38 AM