title: I need to change slider value and send it when it its get submit
body: <p>I need to change and store the value of the slider mean some value coming from the backend and I am storing it in the state showing in the slider but what I need to set if I change slider value like example first value is <strong>partialNameMatchThreshold: 40</strong>, and I change it <strong>partialNameMatchThreshold: 50</strong> then when I submit it whatever I change that vale need to submit mean <strong>partialNameMatchThreshold: 50</strong>, need to submit but what happening my scenario that value not updating you can see updateSlider function I created and also check code sandbox link I am adding blow.</p>
  <pre><code>partialNameMatchThreshold: 40,
  dOBMatchThreshold: 100
  </code></pre>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
    formText: {
      display: &quot;flex&quot;,
      alignItems: &quot;center&quot;,
      marginLeft: theme.spacing(-2)
    }
  }));
  const marks = [
    {
      value: 0
    },
    {
      value: 20
    },
    {
      value: 40
    },
    {
      value: 60
    },
    {
      value: 80
    },
    {
      value: 100
    }
  ];
  function valuetext(value) {
    return `${value}°C`;
  }
  function valueLabelFormat(value) {
    return marks.findIndex((mark) =&gt; mark.value === value) + 2;
  }
  
  function valueLabelFormatDob(value) {
    return marks.findIndex((marks) =&gt; marks.value === value) + 1;
  }
  const validationSchema = Yup.object().shape({
    listType: Yup.array()
      .of(Yup.string())
      .min(1, &quot;Required!&quot;)
      .required(&quot;Required!&quot;),
    Start_Date: Yup.string().required(&quot;Required!&quot;),
    End_Date: Yup.string().required(&quot;Required!&quot;)
  });
  
  const fetchSearchRule = {
    user: 0,
    partialNameMatch: true,
    partialNameMatchThreshold: 40,
    DOBMatch: true,
    dOBMatchThreshold: 100
  };
  
  export default function App() {
    const classes = useStyles();
  
    const [changeRuleSettings, setChangeRuleSettings] = React.useState(false);
    const [rules, setRules] = React.useState(fetchSearchRule);
  
    // React.useEffect(() =&gt; {
  
    // }, []);
    const ruleForm = useFormik({
      initialValues: {
        SetupForm: rules,
        ManagerSetupFormIntialValue: {},
        changeRuleSettings: false,
        FormChangeCount: 0
      },
      // validationSchema,
      onSubmit: (values) =&gt; {
        alert(JSON.stringify(values.SetupForm, null, 2));
        // initiateRules(values);
      }
    });
    const [value, setValue] = useState(ruleForm.initialValues);
  
    const handleCheckBoxChange = (e) =&gt; {
      setRules({
        ...rules,
        [e.target.name]: !rules[e.target.name]
      });
      value.FormChangeCount = 1;
    };
    const updateSlider = (e,newDays) =&gt; {
      if (e.target.name === &quot;partialDOBMatchThreshold&quot;) {
        setRules({
          ...rules,
          name:e.target.name, value: newDays,
        });
        value.FormChangeCount = 1;
      } else {
        setRules({
          ...rules,
          name:e.target.name, value: newDays,
        });
        value.FormChangeCount = 1;
      }
    };
  
    const style = changeRuleSettings
      ? { cursor: &quot;pointer&quot; }
      : { cursor: &quot;not-allowed&quot; };
    return (
      &lt;form onSubmit={ruleForm.handleSubmit}&gt;
        &lt;Grid container&gt;
          &lt;Grid item xs={4}&gt;
            &lt;Box className={classes.formText}&gt;
              &lt;Checkbox
                style={style}
                name=&quot;partialNameMatch&quot;
                checked={rules.partialNameMatch}
                color=&quot;primary&quot;
                inputProps={{ &quot;aria-label&quot;: &quot;secondary checkbox&quot; }}
                onChange={handleCheckBoxChange}
              /&gt;
              &lt;Typography variant=&quot;subtitle2&quot; noWrap={true}&gt;
                Partial Match
              &lt;/Typography&gt;
            &lt;/Box&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={4}&gt;
            {rules.partialNameMatch &amp;&amp; (
              &lt;Slider
                isChangeAllowed={changeRuleSettings}
                onChange={updateSlider}
                name=&quot;partialNameMatchThreshold&quot;
                valueLabelDisplay=&quot;auto&quot;
                aria-label=&quot;pretto slider&quot;
                defaultValue={rules.partialNameMatchThreshold}
                // updateSliderChange={updateSlider}
                getAriaValueText={valuetext}
                step={10}
                marks={marks}
                name=&quot;partialNameMatchThreshold&quot;
              /&gt;
            )}
          &lt;/Grid&gt;
  
          &lt;Grid item xs={12}&gt;
            &lt;Typography variant=&quot;subtitle2&quot; noWrap={true}&gt;
              &lt;Box fontWeight=&quot;fontWeightBold&quot;&gt;D.O.B Rule&lt;/Box&gt;
            &lt;/Typography&gt;
          &lt;/Grid&gt;
  
          &lt;Grid item xs={4}&gt;
            &lt;Box className={classes.formText}&gt;
              &lt;Checkbox
                style={style}
                name=&quot;DOBMatch&quot;
                checked={rules.DOBMatch}
                onChange={handleCheckBoxChange}
                color=&quot;primary&quot;
                inputProps={{ &quot;aria-label&quot;: &quot;secondary checkbox&quot; }}
              /&gt;
              &lt;Typography variant=&quot;subtitle2&quot; noWrap={true}&gt;
                Date Match
              &lt;/Typography&gt;
            &lt;/Box&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={4}&gt;
            {rules.DOBMatch &amp;&amp; (
              &lt;Slider
              // isChangeAllowed={changeRuleSettings}
              
              valueLabelDisplay=&quot;auto&quot;
              aria-label=&quot;pretto slider&quot;
              valueLabelFormat={valueLabelFormat}
              defaultValue={rules.partialDOBMatchThreshold}
              getAriaValueText={valuetext}
              onChange={updateSlider}
              // updateSliderChange={updateSlider}
              step={20}
              marks={marks}
              name=&quot;partialDOBMatchThreshold&quot;
            /&gt;
            )}
          &lt;/Grid&gt;
        &lt;/Grid&gt;
        &lt;Grid xs={12} item&gt;
          &lt;Divider&gt;&lt;/Divider&gt;
          &lt;Box
            mt={2}
            display=&quot;flex&quot;
            alignItems=&quot;flex-end&quot;
            flexDirection=&quot;column&quot;
            mt={2}
          &gt;
            &lt;Button variant=&quot;contained&quot; color=&quot;primary&quot; type=&quot;submit&quot;&gt;
              Changes
            &lt;/Button&gt;
          &lt;/Box&gt;
        &lt;/Grid&gt;
      &lt;/form&gt;
    );
  }
  
  </code></pre>
  <p><a href="https://codesandbox.io/s/tender-mccarthy-5461b?file=/src/App.js:1100-1173" rel="nofollow noreferrer">codeSandbox link</a></p>