Slider Field
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><SliderFieldname="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
Prop | Type | Default | Required |
---|---|---|---|
defaultValue | number[] | - | - |
dir | "ltr" | "rtl" | - | - |
asChild | boolean | - | - |
min | number | 0 | - |
max | number | 100 | - |
name | string | - | - |
disabled | boolean | - | - |
orientation | "horizontal" | "vertical" | - | - |
step | number | - | - |
minStepsBetweenThumbs | number | - | - |
value | number[] | - | - |
onValueChange | (value: number[]) => void | - | - |
theme | "light" | "tonal" | - | - |
css | CSSProperties | - | - |
steps | { label: string; value: number; }[] | [] | - |
outputLabel | (value: number | number[]) => string | - | - |
label | string | - | |
error | string | - | - |
prompt | { link: string; label: string; } | - | - |
description | string | - | - |
required | boolean | - | - |
hideLabel | boolean | - | - |
validation | ValidationOptions | - | - |