Slider

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

version

5.0.0-alpha.36

install

yarn add @welcome-ui/slider

usage

import { Slider } from '@welcome-ui/slider'

label and hint props to add some information to your slider.

step prop allow you to snap to predefined sets of values.

tooltip prop to indicate the value being selected when dragging.

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.

You can specify a range of values that will add a mark for each of them.

To match your background color, you should add a borderSelectorColor.

Name	Type(s)	Default
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

Name	Type(s)	Default
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