WUI logo

Slider

Sliders reflect a range of values along a bar, from which users may select a single value.

version

5.0.0-alpha.16

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 #
NameType(s)DefaultRequired
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 #
NameType(s)DefaultRequired
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

Packages #

Dependencies #
Peer dependencies #

Previous

Select