Update slider value

[userisundefined]

Setting the value of the slider does not change the position of the handle. It just stays where it was before the change.

HTML:

<div class="aui-slider aui-js-slider" data-min="0" data-max="100">
   <input id="slider" type="hidden" class="aui-slider__hidden-field" value="30.00">
</div>
<button id="reset">Reset</button>

JavaScript:

const slider = document.getElementById('slider');
const button = document.getElementById('reset');

reset.addEventListener('click', reset);

function reset() {
   slider.value = 50;  // handle should move to the middle, but stays where it was
}

[userisundefined]

Current workaround:

const sliders = document.getElementsByClassName('aui-slider__hidden-field');
const sliderLines = document.getElementsByClassName('aui-slider__connect');
const sliderHandles = document.getElementsByClassName('aui-slider__origin');


function reset() {
    for(let i = 0; i < sliders.length; i++) {
        sliders[i].value = 50;
    }
    for(let i = 0; i < sliderLines.length; i++) {
        sliderLines[i].style.right ='50%';
        sliderLines[i].style.left ='0%';
    }
    for(let i = 0; i < sliderHandles.length; i++) {
        sliderHandles[i].style.left ='50%';
    }
}