useMuiSliderAdapter
Returns props that connect an MUI Slider to React Hook Form, for single and range sliders, with fallbacks for empty values and transforms for custom shapes.
useMuiSliderAdapter connects an MUI Slider to a React Hook Form field and returns props you spread onto it. It's what MuiSliderElement uses internally.
Use the element for a bare slider. Reach for the hook when the slider needs a label, value formatting or an error message as part of one component, or when the form stores the value in a different shape than MUI's number or [min, max] array.
Import
import { useMuiSliderAdapter } from "@piplup/rhf-adapters/mui-material";Usage
A price range slider that stores { min, max } instead of an array, and requires the two thumbs to stay at least $100 apart. Drag them close together and submit to see the error.
"use client";import Box from "@mui/material/Box";import FormHelperText from "@mui/material/FormHelperText";import Slider from "@mui/material/Slider";import Stack from "@mui/material/Stack";import Typography from "@mui/material/Typography";import { MuiButtonElement, useMuiSliderAdapter,} from "@piplup/rhf-adapters/mui-material";import { type Control, useForm } from "react-hook-form";type PriceRange = { min: number; max: number };type FormValues = { price: PriceRange };const MIN_GAP = 100;// A two-thumb slider that stores `{ min, max }` instead of the `[min, max]`// array MUI works with, and requires a minimum gap between the thumbs.function PriceRangeField({ control }: { control: Control<FormValues> }) { const { error, helperText, ...adapter } = useMuiSliderAdapter< number[], FormValues, "price", HTMLSpanElement >({ control, name: "price", min: 0, max: 1000, composeHelperText: true, helperText: `At least $${MIN_GAP} apart`, rules: { validate: ({ min, max }) => max - min >= MIN_GAP || `Leave at least $${MIN_GAP} between the two prices`, }, transform: { input: (value) => [value.min, value.max], output: (_event: Event, value: number[]) => ({ min: value[0], max: value[1], }), }, }); return ( <Box sx={{ width: 300 }}> <Typography id="price-label" gutterBottom> Price range </Typography> <Slider aria-labelledby="price-label" step={50} valueLabelDisplay="auto" valueLabelFormat={(value) => `$${value}`} {...adapter} /> <FormHelperText error={error}>{helperText}</FormHelperText> </Box> );}export default function Page() { const { control, handleSubmit } = useForm<FormValues>({ defaultValues: { price: { min: 200, max: 600 } }, }); return ( <form noValidate onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack direction="column" spacing={2}> <PriceRangeField control={control} /> <div> <MuiButtonElement control={control} type="submit" variant="contained"> Filter </MuiButtonElement> </div> </Stack> </form> );}How it works
Empty value. If the field value is undefined, the slider shows the hook's defaultValue, or min (0 unless you set it) when there's none. The min fallback is display only: the field stays undefined until the user moves the slider, so required still fails.
Stored value. On change, the hook stores the value Slider reports: a number, or an array for a range slider. Slider fires onChange continuously while the thumb is dragged, so the field updates (and validates, depending on your mode) at every step.
Custom shapes. transform.input turns the field value into what Slider expects, and transform.output receives (event, value) and returns what to store. Each key you set replaces the default for that direction, so your input also replaces the empty-value fallback above. In the demo, the default values guarantee the field is never empty.
min and max. The hook passes your min and max through to Slider unchanged. Internally it uses 0 and 100 when they're missing, matching MUI. They also become validation rules: max always, and min when it isn't 0. The slider can't move outside its range, so these rules only fail for a single-number value that starts outside it, for example from defaultValues or setValue. They don't check arrays or objects.
Errors. Slider has no helper text. Render the returned helperText in a FormHelperText. With composeHelperText: true, it's the field's error message, falling back to your helperText when there's no error.
For a range slider, give the field an array default (in defaultValues or the hook's defaultValue). If the field is empty, the fallback is the single number min, and Slider renders one thumb instead of two.
Props
Prop
Type
Return value
Prop
Type
useMuiSelectAdapter
Returns props that connect an MUI Select to React Hook Form, including multiple selection, for building a select with its own label and helper text.
useMuiSwitchAdapter
Returns adapter props for building custom MUI Switch fields with React Hook Form, with boolean checked handling and custom stored values.