Number and date2 checks
FormSlider
A value, or two, inside a range.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-sliderNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { numberField } from "@/lib/field-schemas" export const schema = z.object({ teamSize: numberField({ min: 1, max: 100 }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormSlider } from "@/components/form/form-slider"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema" export function ExampleForm() { return ( <Form schema={schema} defaultValues={{ teamSize: 25 }} onSubmit={save} > <FieldGroup> <FormSlider name="teamSize" /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Range
min, maxNoneStep
stepNoneBest practices
- Show the value next to the control
- Pair with FormNumber for exact values
Try these values
Terminal
numberField({ min: 1, max: 100 })| Input | Result | Output |
|---|---|---|
25 | Valid | 25 |
0 | Invalid | Enter a number of at least 1 |
101 | Invalid | Enter a number of at most 100 |
API reference
FormSlider
PropDescription
min, max, stepnumberDefault to the schema rules, then 0 to 100.formatValue(value: number) => stringText shown beside the slider.Field frame
PropDescription
namestringKey in the schema. Also picks the preset label and autocomplete.labelReact.ReactNodeOverrides the preset label. Pass null to hide it.descriptionReact.ReactNodeHint under the control.requiredbooleanOverrides the asterisk read from the schema.fieldPropsFormFieldPropsProps for the wrapping Field, such as className.