Can I use MUI Slider?

[k7en]

Hi,
I couldn't use MUI-Slider on Formik, so I was searching for a solution and arrived. Can I use Slider? Or do you have plans to use it?

Please refer to the link.
mui/material-ui#13485
https://material-ui.com/api/slider/

[jan-tee]

You could use this for the time being:

import * as React from "react";
import MuiSlider, { SliderProps as MuiSliderProps } from "@material-ui/core/Slider";
import { FieldProps } from "formik";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

export interface SliderProps extends FieldProps, Omit<MuiSliderProps, "name" | "onChange" | "value" | "defaultValue"> {}

export const fieldToSlider = ({
  field,
  form: { isSubmitting },
  disabled = false,
  ...props
}: SliderProps): MuiSliderProps => {
  return {
    disabled: isSubmitting || disabled,
    ...props,
    ...field,
    name: field.name,
    value: field.value
  };
};

export const Slider: React.ComponentType<SliderProps> = (props: SliderProps) => (
  <MuiSlider {...fieldToSlider(props)}
    onChange={(e, value) => props.form.setFieldValue(props.field.name, value)} />
);

Slider.displayName = "FormikMaterialUISlider";

[cliedeman]

@jan-tee example looks good. Please re-open if you have any other questions

[k7en]

Sorry for the late reply. Thanks for your answer.

[helixbass]

I'd suggest that a more robust variation of @jan-tee's solution would be eg this instead:

...

onChange={(e, value) =>
  props.field.onChange({
    ...e,
    target: {
      ...e.target,
      name: props.field.name,
      value
    },
  })
}

So basically "polyfilling" name onto the event target and forwarding that on to Formik's onChange() handler (rather than hardcoding the internal behavior of that onChange() handler, ie setFieldValue())

I ran into this with <ToggleButtonGroup>. Also needed to use similar technique for onBlur:

onBlur={(e) =>
  props.field.onBlur({
    ...e,
    target: {
      ...e.target,
      name: props.field.name,
    },
  })
}

[CharlestonREM]

requesting some context for implementation

how do I correctly implement @jan-tee 's answer? I am using formik-material-ui's codesandbox implementation below:

here is a sandbox of attempted implementation

https://codesandbox.io/s/nostalgic-water-xjjdt?file=/src/index.tsx

• The onChange handler does not seem to be working...

[cliedeman]

@CharlestonREM here is a working example - https://codesandbox.io/s/falling-darkness-qk3h2

You need to wrap the slider in a formik field

<Field
              component={Slider}
              name="testSlider"
              valueLabelFormat={valueLabelFormat}
              getAriaValueText={valuetext}
              aria-labelledby="discrete-slider-restrict"
              step={null}
              valueLabelDisplay="on"
              marks={marks}
            />

Also I would rely on formik for the default value

[CharlestonREM]

THANK YOU!

@cliedeman , thank you so much for your quick reply.

I forked your sandbox and made these changes:
https://codesandbox.io/s/floral-voice-5rsg3?file=/src/index.tsx

1. Also I would rely on formik for the default value

   2. I removed defaultValue={20} from the attributes on the Field component
   3. To test that I am understanding you, I then changed the initialValues.testSlider property to a different value, and noted that the intended defaultValue behavior of mui is intact