使用html滑块更改值范围

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (61)

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

提问于
用户回答回答于

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>
用户回答回答于

看起来您想要为数组中的所有数字添加60。如果这60是来自滑块,那么只需使用它。

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

扫码关注云+社区

领取腾讯云代金券