How to Synchronize both ways Input Values - h, s, l sliders & hsl code?

Question

I have a hsl color tool that I need to improve with a missing functionality

The tool has 4 parts

1. sliders (range inputs for h, s, l)
2. text boxes (text inputs = show/set h, s, l range values from/for each slider)
3. text box for the output hsl code
4. background = hsl color

1 & 2 are synchronized both ways

Changing 1 or 2 updates both 3 & 4

Changing 3 doesn't update 1 or 2 : Can anybody please show me the most appropriate way to make it ?

Thanks a lot

Here is the current script

const rangeInputs = document.querySelectorAll(`.hslslider input[type="range"]`);

rangeInputs.forEach(el => {
    el.addEventListener('input', updateField);
});

const textInputs = document.querySelectorAll(`.hslslider input[type="text"]`);

textInputs.forEach(el => {
    el.addEventListener('change', updateField);
});

function updateField(e) {
    const field = e.target.dataset.field;
    const value = e.target.value;
    document
    .querySelectorAll(`[data-field="${field}"]`)
    .forEach(el => el.value = value);
    updateBackground();
}

function updateBackground() {
    const [myValueh, myValues, myValuel] = [...rangeInputs].map
    (el => el.value);
    const hsl = `hsl(${myValueh}, ${myValues}%, ${myValuel}%)`;
    document.querySelector('#myCodehsl').value = hsl;
    document.body.style.backgroundColor = hsl;
}

updateBackground();