Skip to main content

Slider

Slider is a form control that lets people choose a number or range within set bounds, such as volume or a price filter.

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
gap
number
2
className
union
No default value
attributes
object
No default value

Slider.Label

Slider.Label props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
wrap
union
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