几个滑块对主滑块的值输出做出反应

Question

说明： 我有一个主滑块，可以说值 1 到 50。该滑块的值输出用于一些子滑块。 我已经能够将这些子滑块的最大值设置为主滑块的输出。 示例：主滑块位于 33 > 所有子滑块的最大值将为 33。 我是从Range slider - avoid moving forward when reaching a value specified in another element得到这个的

现在，当我减小主滑块而几个子滑块处于最大值时，现在只有 1 个滑块会减小，其余的不会，但它们应该。

HTML：

<form id="ui">
  <label for="main" class="labels2">Level</label><output form="ui" id="outMain"></output>
  <input type="range" min="1" max="60" value="1" step="1" class="slider" id="sliderMain">

  <output form="ui" id="out1">1</output>
  <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub1">

  <output form="ui" id="out2">1</output>
  <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub2">

  <output form="ui" id="out3">1</output>
  <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub3">
</form>

JS：

let slider = document.getElementById("sliderMain");
let output = document.getElementById("outMain");
let slider1 = document.getElementById("sub1");
let output1 = document.getElementById("out1");
let slider2 = document.getElementById("sub2");
let output2 = document.getElementById("out2");
let slider3 = document.getElementById("sub3");
let output3 = document.getElementById("out3");

output.innerHTML = slider.value;
slider.oninput = function() {
  output.innerHTML = this.value;
  subfuction1();subfunction2();
}
//slider for line 1
slider1.oninput = function () {
  const outMain = e => {
    const io = e.currentTarget.elements;
    let max = io.outMain.value;
    io.sub1.max = max;
    io.out1.value = io.sub1.value;
  };
  const ui = document.forms.ui;
  ui.oninput = outMain;
}
//slider for line 2
slider2.oninput = function () {
  const outMain = e => {
    const io = e.currentTarget.elements;
    let max = io.outMain.value;
    io.sub2.max = max;
    io.out2.value = io.sub2.value;
  };
  const ui = document.forms.ui;
  ui.oninput = outMain;
}
//slider for line 3
slider3.oninput = function () {
  const outMain = e => {
    const io = e.currentTarget.elements;
    let max = io.outMain.value;
    io.sub3.max = max;
    io.out3.value = io.sub3.value;
  };
  const ui = document.forms.ui;
  ui.oninput = outMain;
}

也许我需要主滑块 oninput 下的函数来检查子滑块值与主滑块值？没能做到。任何帮助、指点、提示将不胜感激！

Answer 1

您正在调用两个未定义的函数。

subfuction1 和 subfunction2 未在您的上述代码中定义。 当我注释掉这些调用时，代码至少不会产生错误。

let slider = document.getElementById("sliderMain");
let output = document.getElementById("outMain");
let slider1 = document.getElementById("sub1");
let output1 = document.getElementById("out1");
let slider2 = document.getElementById("sub2");
let output2 = document.getElementById("out2");
let slider3 = document.getElementById("sub3");
let output3 = document.getElementById("out3");

output.innerHTML = slider.value;
slider.oninput = function() {
  output.innerHTML = this.value;
//  subfuction1();subfunction2();
}
//slider for line 1
slider1.oninput = function () {
  const outMain = e => {
    const io = e.currentTarget.elements;
    let max = io.outMain.value;
    io.sub1.max = max;
    io.out1.value = io.sub1.value;
  };
  const ui = document.forms.ui;
  ui.oninput = outMain;
}
//slider for line 2
slider2.oninput = function () {
  const outMain = e => {
    const io = e.currentTarget.elements;
    let max = io.outMain.value;
    io.sub2.max = max;
    io.out2.value = io.sub2.value;
  };
  const ui = document.forms.ui;
  ui.oninput = outMain;
}
//slider for line 3
slider3.oninput = function () {
  const outMain = e => {
    const io = e.currentTarget.elements;
    let max = io.outMain.value;
    io.sub3.max = max;
    io.out3.value = io.sub3.value;
  };
  const ui = document.forms.ui;
  ui.oninput = outMain;
}

<form id="ui">
          <label for="main" class="labels2">Level</label><output form="ui" id="outMain"></output>
          <input type="range" min="1" max="60" value="1" step="1" class="slider" id="sliderMain">


            <output form="ui" id="out1">1</output>
            <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub1">

            <output form="ui" id="out2">1</output>
            <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub2">

            <output form="ui" id="out3">1</output>
            <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub3">
</form>

顺便说一句，您的意思可能是“subfunction1”。不过没关系，反正我们需要注释掉。

要创建共享最大值，您只需要这样：

在您的版本中，每当有人调整 从属 滑块之一时，您都会采取“额外”操作。但事实上这不是你想要的。每当有人调整 master 滑块时，您都需要额外的操作。

调整主滑块时，您希望调整从属滑块的所有最大值。

调整相关滑块时，您无需做任何额外操作：它们已经设置了正确的最大值。

所以你只需要一个oninput 函数。

如果它解决了您的问题，请记住将其标记为已解决。 8-)

let slider = document.getElementById("sliderMain");
let output = document.getElementById("outMain");
let slider1 = document.getElementById("sub1");
let output1 = document.getElementById("out1");
let slider2 = document.getElementById("sub2");
let output2 = document.getElementById("out2");
let slider3 = document.getElementById("sub3");
let output3 = document.getElementById("out3");


function outMain(e){
  output.innerHTML = slider.value;
  const io = e.currentTarget.elements;
  let max = io.outMain.value;
  io.sub1.max = max;
  io.out1.value = io.sub1.value;
  io.sub2.max = max;
  io.out2.value = io.sub2.value;
  io.sub3.max = max;
  io.out3.value = io.sub3.value;
};

document.forms.ui.oninput = outMain;

<form id="ui">
  <label for="main" class="labels2">Level</label><output form="ui" id="outMain"></output>
  <input type="range" min="1" max="60" value="1" step="1" class="slider" id="sliderMain">


  <output form="ui" id="out1">1</output>
  <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub1">

  <output form="ui" id="out2">1</output>
  <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub2">

  <output form="ui" id="out3">1</output>
  <input type="range" min="1" max="50" value="1" step="1" class="slider" id="sub3">
</form>