CODEWITHSUNDEEP
javascriptjqueryhtml
Damian Ruiz
Damian Ruiz

Reputation: 23

Display value of input type range for multiple inputs with same class name

I'm trying to display values of each input type range that have the same class name on the span tag right below it.

This is how my code looks so far:

<input type="range" min="2" max="50" value="20" class="slider" >
 <label>You selected: <span class="limit"></span></b></label>
 //this label should display the current value of the first slider

<input type="range" min="2" max="50" value="20" class="slider"  >
<label>You selected: <span class="limit"></span></b></label>
//this label should display the current value of the second slider

<input type="range" min="2" max="50" value="20" class="slider" >
<label>You selected: <span class="limit"></span></b></label>
//this label should display the current value of the third slider

I'm trying to get elements by class name instead of id because these inputs are generated through a loop, and can't have the same id for all of them. Is there a way to assign the slider's current value to the span right below it using JavaScript or jQuery?

Upvotes: 0

Views: 643

Answers (1)

Shishir Arora
Shishir Arora

Reputation: 5943

I have made that loop code. render function is generating the sliders. change event can be used to change labels. bands is the current values of sliders. 

var render = (bands) => {
  const container = document.querySelector(".container");
  const bandsHTML = bands.reduce(
    (r, band) =>
      r +
      `<div class='column'><input 
    type='range' 
    value=${band} 
    class='slider'
    min="-12" 
    max="12"
/><span class='slider__value'>${band}</span></div>`,
    ``
  );

  container.innerHTML = bandsHTML;
};


document.addEventListener(
  "change",
  e => {
    const classList = e.target.classList;
      const sliders = document.querySelectorAll(".slider");
      const values = Array.from(sliders).map(slider => slider.value);
      render(values);
    
  },
  false
);

//initial values
render([2,3,2,3]);
<div class='container'>
</div>

Upvotes: 0

Related Questions