RHFSlider
Sliders reflect a range of values along a bar, from which users may select a
single value. They are ideal for adjusting settings such as volume or brightness.
RHFSlider
extends Slider
and can be customized in a similar way.
Usage
import { RHFSlider, RHFSliderProps } from '@nish1896/rhf-mui-components';
<RHFSlider
fieldName="score"
register={register}
defaultValue={40}
errorMessage={errors?.score?.message}
/>
Examples
API
RHFSliderProps
extends SliderProps
and accepts the following additional props:
Name | Type | Required | Description |
---|---|---|---|
fieldName | string | ✅ | React Hook Form requires name as a key for the registration process. |
register | UseFormRegister | ✅ | The register option yielded on calling the useForm hook. |
registerOptions | RegisterOptions | Register options if using react-hook-form without any validation libraries like yup or Joi. | |
defaultValue | number OR number[] | ✅ | Initial value set for RHFSlider component on render. |
onValueChange | (event: Event, value: number OR number[], activeThumb: number) => void | Optional callback function returning the selected value of RHFSlider . | |
label | ReactNode | The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name". | |
showLabelAboveFormField | boolean | Render form label above the form field in FormLabel component. | |
formLabelProps | FormLabelProps | FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component. | |
helperText | ReactNode | Optional helperText to render under RHFSelect or RHFNativeSelect field. | |
errorMessage | ReactNode | Error message to be shown for a field in FormHelperText component. | |
hideErrorMessage | boolean | Prevent replacing of form HelperText by error message during validation trigger. | |
formHelperTextProps | FormHelperTextProps | FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component. |