Как изменить значение атрибута value в input range?

Question

[MyQuestion]

Добрый день!

Я пытаюсь сделать слайдер "до-после".
У него есть два контрола, ползунок и две кнопки, которые показывают одно или другое изображение.

Что я делаю:

<input type="range" min="0" max="100" value="50" class="range-slider" id="myRange">

rangeSlider.oninput = function () {
    before.style.width = `${100 - this.value}%`;

    rangeSlide.value = `${100 - ((before.offsetWidth / slider.offsetWidth) * 100)}`;
    console.log(rangeSlider.value);
  }

Решил сделать с помощью input range (для меня сейчас это самое доступное решение).
С ползунком справился, но когда я нажимаю на одну из кнопок, которые должны отдать либо 100% либо 0%, состояние input range - стоит на месте (прогресс бар). Естественно я хочу перезаписать в html input и его значение value. В консоле я вижу, что значение value меняется, но во вкладке elements, значение value input остаётся неизменным. И соответственно прогресс бар стоит на месте.

upd: Может не совсем понятно, какого эффекта я хочу добиться, поэтому немного уточню.
В девтулс, найдя в html дереве свой инпут, вручную меняя значение value, я вижу, как перемещается ползунок, в соответствие значению value. Т.е., если я ввиду в value значение от 1 до 100, например 20, прогресс бар заполнится на 20%.
И допустим я нажимаю кнопку "до", со значением 0%, я передаю в value значение 0, и прогресс бар смещается в стартовую позицию, на отметке 0.

upd-2: В общем надо было через метод setAtribute, просто я его не правильно использовал.
Вот что получилось:

rangeSlider.oninput = function () {
  before.style.width = `${100 - this.value}%`;
}

function rengeSliderChange() {
  rangeSlider.setAttribute('value', `${100 - ((before.offsetWidth / slider.offsetWidth) * 100)}`);
};

sliderButtons.addEventListener("click", function (e) {
  rengeSliderChange()
});

И я почему-то думал, offsetWidth постоянно отслеживается, и его не нужно вызывать) Крутил ширину блока в инспекторе, а value не реагировал...