JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<input id='range1' type="range" class="reset" value=50 resetTo=20></input>
<input type="range" id="range2"></input>

JavaScript

var inputs = document.getElementsByTagName('input');
var reset = document.getElementsByClassName('reset');

document.addEventListener('input', function (e) {
    if (!e.target.classList.contains('reset')) {
        //console.dir(inputs[0]);
        [].slice.call(reset).forEach(function(a){a.value = a.attributes.resetTo||0;});
    }
    //console.log(e);

});
document.addEventListener('mouseup',function(){    var i = document.createElement('input');
    i.type = 'range';
    i.id = 'range'+inputs.length;
                                               if(inputs.length%2)
                                                   i.classList.add('reset');
    document.body.appendChild(i);
                                              });