how to update new range values in range-slider-input package?

16 views Asked by At

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?

0

There are 0 answers