I want to get 2 fields on the form to work in sync

[chihiro7793]

I am trying to create JsonSchema-Form component but I ran into a problem. I want inputs to change synchronously. There are 2 fields on the form, one is a "Limit" input and the other is a slider(range) input that can be dragged and change the limit value. In other words I want to change limit value by dragging the slider. But I cannot get them to work in sync. I am not really sure how to proceed with this and how to use the Onchange or anyother method to do what I want. Is it even possible?

Here is a sample of what I'm trying to create:

const uiSchema = {
    limitSlider: { "ui:widget": "range" }
  };

const schema = {
    required: ["limit", "limitSlider"],
    properties: {
      limit: {
        title: "New Limit",
        type: "integer"
      },
      limitSlider: {
        title: "New Limit Range",
        type: "number",
        minimum: 0,
        maximum: 100
      }
    }
  };

  const onChange = (updatedValues) => {
    console.log("onchange", updatedValues);
  };

  const formData = { limit: 10, limitSlider: 10 };
  
  
  return (
    <MuiForm
      uiSchema={uiSchema}
      schema={schema}
      formData={formData}
      onChange={onChange}
    />
  );