Click here to Skip to main content
15,790,135 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have multiple Sliders with the Code you find below, they work how they should work, but I use this exact Code for at least 10 Sliders and it will show the Values of v1 and v2 just at the first Slider. How can I make all Sliders be able to have their value ?


<div class="range-text"</div>
<section class="range-container" style="margin-left: 75px;">
    <input id="MIN" class="rangeslider" value="0.2" min="0.1" max="2" step="0.1" type="range">
    <input id="MAX" class="rangeslider" value="0.3" min="0.1" max="2" step="0.1" type="range">


$(document).ready(function () {
    let rangeText = document.getElementsByClassName('range-text')[0]
    let rangeContainers = Array.from(document.getElementsByClassName('range-container'));
    let rangeSliders = Array.from( => container.getElementsByTagName('input')).pop());

    rangeSliders.forEach(input => {
        if (input.type === 'range') {
            input.oninput = grabValues

    function grabValues() {
        const parent = this.parentNode,
            slides = Array.from(parent.getElementsByTagName('input'));

        let v1 = parseFloat(slides[0].value),
            v2 = parseFloat(slides[1].value);

        if (v1 >= v2) {
            const tmp = v2;
            v2 = v1;
            v1 = tmp;

        rangeText.innerHTML = `${v1}mm${v2}mm`;


What I have tried:

I tried the Code which is linked

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900