CODEWITHSUNDEEP
reactjsmaterial-uiformikyup
Anjana Dharmasiri
Anjana Dharmasiri

Reputation: 11

material ui slider component onChange event not working with Fromik handleChange event

The initial formic value is taken by the slider but Formik handleChange event not update the slider value

Formik function

const formik = useFormik({
        initialValues: {
            slide: 50,
        },
        validationSchema: Yup.object({
            slide: Yup.number()
                .min(100, 'must be grater than 100'),
        }),
        onSubmit: values => {
            alert(JSON.stringify(values, null, 2));
        },
    });

material ui slider component with onChange event, it get initial formik value but not update it

<Slider
    name="slide"
    id="slide"
    valueLabelDisplay="auto"
    aria-label="term slider"
    defaultValue={formik.values.slide}
    onChange={formik.handleChange}
    min={1}
    max={110}
  />

Please check the codesandbox sample

Upvotes: 1

Views: 1288

Answers (2)

Murat Cem YALIN
Murat Cem YALIN

Reputation: 314

        <Slider
          id="slider-id"
          value={values.slider}
          onChange={(e, newValue) => handleChange({ target: { type: "input", id: "slider", value: newValue } })}
          valueLabelDisplay="auto"
          aria-labelledby={`input-slider`}
        />

Upvotes: 0

zed
zed

Reputation: 79

you can use setFieldValue:

import React from "react";
import "./styles.css";
import Slider from "@material-ui/core/Slider";
import { useFormik } from "formik";
import * as Yup from "yup";
import Button from "@material-ui/core/Button";
import { Formik } from "formik";

export default function App() {
  return (
    <div>
      <Formik
        initialValues={{ slide: 50 }}
        validationSchema={Yup.object({
          slide: Yup.number().min(50, "must be grater than 100")
        })}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 400);
        }}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
          setFieldValue
          /* and other goodies */
        }) => (
          <form onSubmit={handleSubmit}>
            <Slider
              name="slide"
              id="slide"
              valueLabelDisplay="auto"
              aria-label="term slider"
              value={values.slide}
              onChange={(e, v) => {
                setFieldValue('slide', v);
              }}
              min={1}
              max={110}
            />
            {errors.slide && touched.slide && errors.slide}
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        )}
      </Formik>
    </div>
  );
}

Upvotes: 2

Related Questions