使用范围滑块作为输出答案

【问题标题】：Use Range Slider as Output使用范围滑块作为输出
【发布时间】：2018-11-11 22:18:15
【问题描述】：

如何让 Range Slider 显示输入的结果？

示例：如果输入为 5 X 5，如何让 Range Slider 显示 25？

【问题讨论】：

所以您想以编程方式设置范围滑块的值？即，将其值设置为“25”，并通过输入夹在滑块上的位置可见？

【解决方案1】：

如果我正确理解了您的问题，那么您可以通过将其设置为 value 字段来以编程方式设置“范围”滑块输入元素的值，如下所示：

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>

【讨论】：

好的，非常感谢。