使用范围滑块作为输出
Use Range Slider as Output
如何让范围滑块显示输入的结果?
示例:如果输入 5 X 5 如何让范围滑块显示 25?
如果我正确理解你的问题,那么你可以通过设置 value
字段以编程方式设置 "range" 滑块输入元素的值,如下所示:
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>
如何让范围滑块显示输入的结果?
示例:如果输入 5 X 5 如何让范围滑块显示 25?
如果我正确理解你的问题,那么你可以通过设置 value
字段以编程方式设置 "range" 滑块输入元素的值,如下所示:
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>