Skip to main content

Slider

Slider is a form control for choosing a number or a range within set bounds, like adjusting volume or filtering by price. It shows the current value in a tooltip, and people drag a handle or use the arrow keys to change it.

Import

import { Slider } from '@vortexlabs/vortex';
import type { SliderProps } from '@vortexlabs/vortex';

Other links

Storybook

Slider.Root

Slider.Root props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
id
string
No default value
disabled
boolean
false
error
boolean
false
className
union
No default value
attributes
object
No default value

Slider.Label

Slider.Label props
PropTypeDefaultAttributes
children
React.ReactNode
No default value

Slider.Control

Slider.Control props
PropTypeDefaultAttributes
step
number
1
min
number
0
max
number
100
orientation
union
horizontal
renderValue
union
No default value
className
union
No default value
attributes
object
No default value
value
number
No default value
defaultValue
number
No default value
range
boolean
false
name
string
No default value
minName
string
No default value
maxName
string
No default value
minLabel
string
No default value
maxLabel
string
No default value
inputAttributes
object
No default value
minInputAttributes
object
No default value
maxInputAttributes
object
No default value
onChange
callback
No default value
onChangeCommit
callback
No default value
minValue
number
No default value
maxValue
number
No default value
defaultMinValue
number
No default value
defaultMaxValue
number
No default value

Slider.ErrorMessage

Slider.ErrorMessage props
PropTypeDefaultAttributes
children
React.ReactNode
No default value

Slider.HelperText

Slider.HelperText props
PropTypeDefaultAttributes
children
React.ReactNode
No default value