blocks|key|1576156|text|看起来您想要将数组中的所有数字加60。如果这个60来自滑块，那么就使用它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1576157|​|1576158|var+ogarray+=+[20,+22,+30,+40];
const+add+=+60;
const+res+=+ogarray.map(e+=>+e+%2B+add);
console.log(res);|code-block|syntax|javascript|1576159|1576160|entityMap^0|N|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|T|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|O|$]]

<p>It looks like you want to add 60 to all numbers in the array. If this <code>60</code> comes from the slider, then just use it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var ogarray = [20, 22, 30, 40];
const add = 60;
const res = ogarray.map(e =&gt; e + add);
console.log(res);</code></pre>
</div>
</div>
</p>


blocks|key|1791240|text|2个单独的滑块。一个是确保滑块不会低于min或高于max，另一个是阻止数组值低于min或高于max。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1791241|​|1791242|var+values+=+[20,22,30,40];
++++++++var+min+=+0;
++++++++var+max+=+100;
++++++++function+slide1(slide)+{
++++++++++++tempValues+=+[...values];
++++++++++++for(x=0;+x<tempValues.length;+x%2B%2B)+{
++++++++++++++++tempValues[x]+%2B=+Number(slide.value);
++++++++++++}
++++++++++++console.log(tempValues);
++++++++}

++++++++function+slide2(slide)+{
++++++++++++highest+=+Math.max(...values);
++++++++++++lowest+=+Math.min(...values);
++++++++++++slideValue+=+Number(slide.value);
++++++++++++if(highest+%2B+slideValue+<=+max+%7C%7C+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%2B%2B)+{
++++++++++++++++++++values[x]+%2B=+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;
++++++++}|code-block|syntax|javascript|1791243|<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>|1791244|1791245|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>2 separate sliders. One makes sure the slider doesnt go below min or above max, and one that stops the array values going below min or above max.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var values = [20,22,30,40];
        var min = 0;
        var max = 100;
        function slide1(slide) {
            tempValues = [...values];
            for(x=0; x&lt;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 &lt;= max || slideValue - lowest &gt;= min) {
                slide.min = min - lowest - slideValue;
                slide.max = max - highest - slideValue;
                slide.value = (slide.max - slide.min) / 2;
                for(x=0; x&lt;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;
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slidecontainer"&gt;
        &lt;label&gt;slide 1&lt;/label&gt;
            &lt;input onchange="slide1(this)" type="range" min="0" max="100" value="50" class="slider" id="myRange"&gt;
            &lt;label&gt;slide 2&lt;/label&gt;
            &lt;input onchange="slide2(this)" type="range" min="-50" max="50" value="0" class="slider" id="myRange2"&gt;
        &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1576215|text|这是我可以从你的回答和Andrew+Fan的评论中得到的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1576216|​|1576217|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+%2B+Number(slider.value)+<=+100)+{
++++++++++++newArray.push(item+%2B+Number(slider.value))
++++++++}
++++++++else+{
++++++++++++newArray.push(100)
++++++++}
++++++++output.innerText+=+`newArray:+${newArray}`
++++})
})|code-block|syntax|javascript|1576218|<!DOCTYPE+html>
<html>
++++<body>
++++++++<h1+id="output"></h1>
++++++++<input+id="slider"+type="range"+value=0></input>
++++</body>
</html>|1576219|1576220|它将滑块的最小和最大值设置为oldArray中的最小和最大元素。当滑块发生变化时，它会将newArray中的每个元素设置为oldArray元素加上滑块的位置。|offset|length|style|CODE|1576221|它不会改变滑块的最小或最大值。它会添加确切的滑块位置。这意味着当滑块在左侧时，它会加上20或oldArray中最小的值。|1576222|Here+is+a+link+to+input+ranges|1576223|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range^0|0|0|0|0|0|E|8|18|8|1P|8|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|18|8|@$N|19|O|1A|P|Q]|$N|1B|O|1C|P|Q]|$N|1D|O|1E|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1F|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1G|8|@]|9|@$N|1H|O|1I|1|1J]]|A|$]]|$1|V|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<p>Here is what I could get from your answer and Andrew Fan's comment</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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", () =&gt; {
    newArray = [];
    oldArray.sort()
    oldArray.forEach((item, index) =&gt; {
        if (item + Number(slider.value) &lt;= 100) {
            newArray.push(item + Number(slider.value))
        }
        else {
            newArray.push(100)
        }
        output.innerText = `newArray: ${newArray}`
    })
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;body&gt;
        &lt;h1 id="output"&gt;&lt;/h1&gt;
        &lt;input id="slider" type="range" value=0&gt;&lt;/input&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>It sets the min and max of the slider to the least and greatest elements in <code>oldArray</code>. When the slider changes it sets each element in <code>newArray</code> to the <code>oldArray</code> element plus the slider's position.</p>

<p>It does not change anything about the slider's min or max. It adds the exact slider's position. Meaning when the slider is at the left side it adds 20 or whatever the least value is in oldArray.</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range" rel="nofollow noreferrer">Here is a link to input ranges</a></p>


<p>I have an array of values from 0-100 i.e [20, 22, 30, 40]. I'd like to be able to change all the values uniformly with an HTML slider + some JS.</p>

<pre><code>var ogarray = [20, 22, 30, 40];

var newarray = // [80, 82, 90, 100]
</code></pre>

<p>With a min of 0 and a max of 100 if done correctly the new array values would be [80, 82, 90, 100]</p>


Change range of values with html slider

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

问使用html滑块更改值的范围
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html滑块更改值的范围EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html滑块更改值的范围
EN