Several sliders reacting to value output from a main slider Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Several sliders reacting to value output from a main slider without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Description: I have a main slider with lets say value 1 to 50. The value output of that slider is used for a few subsliders. I’ve been able to set the max of those subsliders to the output of the main sliders. example: Main slider is at 33 > all subsliders max will be 33. i got this from Range slider – avoid moving forward when reaching a value specified in another element

Now, when i reduce the main slider while a few subsliders are on their maximum, right now, only 1 slider will reduce aswel, the rest won’t, but they should.

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;
}

Perhaps i need a function under the main slider oninput to check subslider values against main slider value? haven’t been able to do it. Any help, pointers, tips would be appreciated!

Answer

You are calling two functions that are not defined.

subfuction1 and subfunction2 are not defined in your above code. When I comment out those calls, the code at least produces no errors.

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>

On a minor note, you may have meant “subfunction1″. But it doesn’t matter, since we need to comment it out anyway.

To create the shared maximum, you only need this:

In your version, you are taking “extra” action whenever anyone tweaks one of the dependent sliders. But in fact that is not what you want. You want extra action whenever anyone tweaks the master slider.

When the master slider is tweaked, you want all the max’s of the dependent sliders to be adjusted.

When the dependent sliders are tweaked, you don’t have to do anything extra: they already have the correct maximum value set.

So you need only one oninput function.

Remember to mark this as solved if it solves your problem. 😎

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>
We are here to answer your question about Several sliders reacting to value output from a main slider - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji