使用html滑块更改值的范围
使用html滑块更改值的范围
提问于 2019-06-19 07:49:07
我有一个从0到100的数组，即20，22，30，40。我希望能够通过一个HTML滑块+一些JS来统一更改所有的值。
var ogarray = [20, 22, 30, 40];
var newarray = // [80, 82, 90, 100]如果操作正确，最小值为0，最大值为100，则新数组值将为80、82、90、100
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-06-19 20:35:40
这是我可以从你的回答和Andrew Fan的评论中得到的
let oldArray = [20, 22, 30, 40];
let newArray;
let output = document.getElementById("output")
output.innerText = `Move the slider`
let slider = document.getElementById("slider")
slider.min = oldArray[0]
slider.max = oldArray[oldArray.length-1]
slider.addEventListener("change", () => {
newArray = [];
oldArray.sort()
oldArray.forEach((item, index) => {
if (item + Number(slider.value) <= 100) {
newArray.push(item + Number(slider.value))
}
else {
newArray.push(100)
}
output.innerText = `newArray: ${newArray}`
})
})<!DOCTYPE html>
<html>
<body>
<h1 id="output"></h1>
<input id="slider" type="range" value=0></input>
</body>
</html>
它将滑块的最小和最大值设置为oldArray中的最小和最大元素。当滑块发生变化时，它会将newArray中的每个元素设置为oldArray元素加上滑块的位置。
它不会改变滑块的最小或最大值。它会添加确切的滑块位置。这意味着当滑块在左侧时，它会加上20或oldArray中最小的值。
Stack Overflow用户
发布于 2019-06-19 08:21:18
看起来您想要将数组中的所有数字加60。如果这个60来自滑块，那么就使用它。
var ogarray = [20, 22, 30, 40];
const add = 60;
const res = ogarray.map(e => e + add);
console.log(res);
Stack Overflow用户
发布于 2019-06-19 09:07:10
2个单独的滑块。一个是确保滑块不会低于min或高于max，另一个是阻止数组值低于min或高于max。
var values = [20,22,30,40];
var min = 0;
var max = 100;
function slide1(slide) {
tempValues = [...values];
for(x=0; x<tempValues.length; x++) {
tempValues[x] += Number(slide.value);
}
console.log(tempValues);
}
function slide2(slide) {
highest = Math.max(...values);
lowest = Math.min(...values);
slideValue = Number(slide.value);
if(highest + slideValue <= max || slideValue - lowest >= min) {
slide.min = min - lowest - slideValue;
slide.max = max - highest - slideValue;
slide.value = (slide.max - slide.min) / 2;
for(x=0; x<values.length; x++) {
values[x] += slideValue;
}
}
console.log(values);
}
window.onload = init;
function init() {
slide = document.getElementById('myRange2');
highest = Math.max(...values);
lowest = Math.min(...values);
slide.max = max - highest;
slide.min = min - lowest;
}<div class="slidecontainer">
<label>slide 1</label>
<input onchange="slide1(this)" type="range" min="0" max="100" value="50" class="slider" id="myRange">
<label>slide 2</label>
<input onchange="slide2(this)" type="range" min="-50" max="50" value="0" class="slider" id="myRange2">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56658396
复制相关文章
相似问题