Slider
View in LexiconA 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'; |
Table of Contents
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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/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>
);
}
Table of Contents