Skip to main content

Field Slider

show code
import { Button, Stack } from "@mui/material";
import PropsTable from "@site/src/components/PropsTable";
import { NotifyProvider } from "mui-eazy";
import {
useFormRef,
FieldDatePicker,
FormProvider,
notify,
LocalizationProvider,
} from "mui-eazy";

export const FieldSliderDemo = () => {
const formRef = useFormRef({});
const { handleSubmit } = formRef;
const onSubmit = handleSubmit(() => {
notify.success(JSON.stringify(formRef.getValues()));
});
return (
<FormProvider formRef={formRef} onSubmit={onSubmit}>
<FieldSlider name="field"></FieldSlider>
<Stack
direction="row"
sx={{
justifyContent: "end",
}}>
<Button
sx={{
marginTop: "10px",
}}
variant="contained"
type="submit">
Submit
</Button>
</Stack>
</FormProvider>
);
};

Props​

tip
  • Type: any, can be customized as needed.
  • Default value:
    • Not specified: optional.
    • Specified as "require": mandatory.
  • Type link: Click to navigate to the details below.

Type​

nametypedefaultValuedesc
namestringform item name
labelnumberform item label
defaultValueanyThe default value. Use when the component is not controlled.
valueanyThe value of the input element, required for a controlled component.
typestringType of the input element. It should be a valid HTML5 input type.
requiredbooleanfalseIf true, the label is displayed as required and the input element is required.