使用范围滑块作为输出

Question

How can I have a Range Slider show the results of an input?

Example: If the input it 5 X 5 how do I get the Range Slider to show 25?

Answer 1

If I understand your question correctly, then you can programmatically set the value of a "range" slider input element by setting it's value field like so:

 const input = document.getElementById('my-input'); // Add keyup listener to input to allow interactive updates of // range slider input.addEventListener('keyup', function() { // Get range slider element const rangeSlider = document.getElementById('my-range-slider'); // Set value of range slider from input value rangeSlider.value = input.value * input.value })

 <p>Input</p> <div> <input id="my-input" /> </div> <p>Output = Input x Input</p> <div> <span>0</span> <input id="my-range-slider" type="range" min="0" max="1000" /> <span>1000</span> </div>