I want to use this package
I have two text input fields. I want the values to be updated in these text fields when I change the slider, and I manage to do this successfully. However, when I change the values in the text fields with the intention of automatically updating the slider, the slider does not change automatically or it gives an error.
<input type="number" name="min" id="minInput"></input>
<input type="number" name="max" id="maxInput"></input>
<div id="range-slider"></div>
And the initial definition during page load: (it works!)
const inputSlider = rangeSlider(document.querySelector('#range-slider'), {
min: 0,
max: 100,
step: 1,
value: [30, 50],
onInput: (values) => {
const minValueElement = document.getElementById('minInput');
const maxValueElement = document.getElementById('maxInput');
const min = values[0];
const max = values[1];
minValueElement.value = min;
maxValueElement.value = max;
}
});
Now I want to do the opposite. Meaning, when I change the inputs, the value of the slider should change.
I try these:
document.getElementById('minInput').addEventListener('input', function (event) {
const englishNumber = event.target.value;
//inputSlider.value[0] = englishNumber; // no error but not work
//inputSlider.value = [englishNumber, 100000000]; // no error but not work
//inputSlider.setValue([englishNumber, inputSlider.value[1]]);
// Error: User Uncaught TypeError: inputSlider.setValue is not a function
});
whats the wrong?