时间戳

首页 > 解决方案 > 使用 html 滑块更改值的范围

javascript - 使用 html 滑块更改值的范围

问题描述

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

标签： javascripthtmlarrays

解决方案

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>

推荐阅读