drag and drop input ranges to text areas

by Darby Rathbone

HTML

<div class="cont">
    <input id="slider1" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<div class="cont">
    <input id="slider2" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<div class="cont">
    <input id="slider3" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<div class="cont">
    <input id="slider4" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<div class="cont">
    <input id="slider5" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<div class="cont">
    <input id="slider6" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<div class="cont">
    <input id="slider7" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<div class="cont">
    <input id="slider8" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<div class="cont">
    <input id="slider9" type="range" min="0" max="100" step="1" value="0" />
    <input class="range" type="text" value="0" />
</div>
<input class="total" type="text" value="0" />

JavaScript

[].forEach.call(document.getElementsByTagName('input'), function (e) {


    e.addEventListener('input', function (E) {
        [].forEach.call(E.target.parentElement.children, function (f) {
            f.value = parseInt(E.target.value) || 0
        });
        document.getElementsByClassName('total')[0].value = [].map.call(document.querySelectorAll('input[type=range]'), function (a) {
            return parseInt(a.value);
        }).reduce(function (a, b) {
            return a + b
        });
    });

});
var $ = function $(a) {
    _$ = function (bound) {
        var o = Object.create(o);
        o.on = bound.addEventListener.bind(bound);
        Object.keys(bound).forEach(function (f) {
            if (f.indexOf('on') === 1) o[f.replace('on', '')] = o.on.bind(f.replace('on', ''));
        });
        return o;

    };
    if ([].some.call(arguments, function (e) {
        return typeof e === 'string';
    })) {
        $([].filter.call(arguments, function (e) {
            return e instanceof String;
        }).map(function (e) {
            return $(e);
        }));

    } else {
        if (Array.isArray(a)) {

            return _$(a, function (e) {
                return document.querySelectorAll(e);
            });
        }
    }
};