Function: SliderField()

SliderField<TFieldValues>(props): Element

A slider field component that integrates React Hook Form with HeroUI Slider.

This component provides a type-safe slider field with validation support, error handling, and accessibility features. The field value is a number.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

SliderFieldProps<TFieldValues>

The slider field props

Returns

Element

The rendered slider field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  volume: z.number().min(0).max(100),
  brightness: z.number().min(0).max(100),
});
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.slider("volume", "Volume", { min: 0, max: 100 }),
          FormFieldHelpers.slider("brightness", "Brightness", { min: 0, max: 100 }),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With custom step and marks
<SliderField
  control={form.control}
  name="volume"
  label="Volume"
  sliderProps={{
    minValue: 0,
    maxValue: 100,
    step: 10,
    marks: [
      { value: 0, label: "0" },
      { value: 50, label: "50" },
      { value: 100, label: "100" },
    ],
  }}
/>