Combines a Slider with a label and form integration.

SliderField renders a Slider with a label, and easy implementation with Form. It also renders a Slider.Value label underneath the slider, and a Slider.Steps component should steps be passed in.

In it's most simple form, a slider allows one value to be set between two given values (default 0 and 100).

Please note: the value or defaultValue passed in should always be an array.

<Form>
<SliderField name="slider" label="Select a value" defaultValue={[50]} />
</Form>

With optional Slider.Steps:

<Form>
<SliderField
name="slider"
label="Select a value (now with steps)"
defaultValue={[50]}
steps={[
{ value: 0, label: 'min' },
{ value: 50, label: 'mid' },
{ value: 100, label: 'max' }
]}
/>
</Form>

API Reference

PropTypeDefaultRequired
defaultValue
number[]

-

-

dir
"ltr" | "rtl"

-

-

asChild
boolean

-

-

min
number
0

-

max
number
100

-

namestring

-

-

disabled
boolean

-

-

orientation
"horizontal" | "vertical"

-

-

step
number

-

-

minStepsBetweenThumbs
number

-

-

value
number[]

-

-

onValueChange
(value: number[]) => void

-

-

theme
"light" | "tonal"

-

-

cssCSSProperties

-

-

steps
{ label: string; value: number; }[]
[]

-

outputLabel
(value: number | number[]) => string

-

-

labelstring

-

error
string

-

-

prompt
{ link: string; label: string; }

-

-

description
string

-

-

required
boolean

-

-

hideLabel
boolean

-

-

validation
ValidationOptions

-

-