Slider
Sliders reflect a range of values along a bar, from which users may select a single value.
version
5.6.1
install
yarn add @welcome-ui/slider
usage
import { Slider } from '@welcome-ui/slider'
Usage #
Label & Hint #
label
and hint
props to add some information to your slider.
Step #
step
prop allow you to snap to predefined sets of values.
Tooltip #
tooltip
prop to indicate the value being selected when dragging.
Disabled #
Types #
There is 3 differents types for slider: inline
, left-field
and right-field
.
There is only 2 differents types for range slider: inline
and fields
.
Values #
You can specify a range of values that will add a mark for each of them.
borderSelectorColor #
To match your background color, you should add a borderSelectorColor
.
Properties #
Slider #
Name | Type(s) | Default | Required |
---|---|---|---|
onChange | (value: number) => void | ||
min | number | ||
max | number | ||
value | number | ||
borderSelectorColor | string | light-900 | |
label | string | ||
hint | string | ||
step | number | 1 | |
type | "left-field" "right-field" "inline" | ||
values | number[] | ||
tooltip | Boolean | ||
disabled | Boolean |
Slider.Range #
Name | Type(s) | Default | Required |
---|---|---|---|
value | Range | ||
onChange | (value: Range) => void | ||
type | "inline" "fields" | ||
label | string | ||
disabled | Boolean | ||
max | number | ||
min | number | ||
step | number | 1 | |
borderSelectorColor | string | light-900 | |
hint | string | ||
values | number[] | ||
tooltip | Boolean |