Question

我有一个从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]

Answer 1

您似乎想对数组中的所有数字加60。如果此60来自滑块，则只需使用它即可。

var ogarray = [20, 22, 30, 40];
const add = 60;
const res = ogarray.map(e => e + add);
console.log(res);

Answer 2

2个独立的滑块。一种是确保滑块不会低于最小值或高于最大值，另一种是阻止数组值低于最小值或高于最大值。

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>

Answer 3

这是我从您的答案和范德伦的评论中可以得到的

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中的最小值。

Here is a link to input ranges

使用HTML滑块更改值的范围

3 个答案: