Four input element slider UI styles and four inputui styles

Four input element slider UI styles and four inputui styles

The four input element slider UI styles are rendered using CSS3, and JavaScript is used to handle the Slider's mouse drag event. As follows:

Download Online Preview source code

Implementation code.

Js Code:

var range_els = document.querySelectorAll('input[type=range]'), n = range_els.length, style_el = document.createElement('style'), styles = [], track_sel = [        '::-moz-range-track',        '::-webkit-slider-runnable-track',        ' /deep/ #track'    ], thumb_sel = [        '::-webkit-slider-thumb',        ' /deep/ #thumb'    ], a = ':after', b = ':before', s = [        '',        '%',        '%'    ];document.body.appendChild(style_el);for (var i = 0; i < n; i++) {    if (window.CP.shouldStopExecution(1)) {        break;    }    styles.push('');    range_els[i].addEventListener('input', function () {        var idx = this.id.split('r')[1] - 1, base_sel = '.js #' + this.id, str = '', min = this.min || 0, max = this.max || 100, c_style, u, edge_w, val;        this.setAttribute('value', this.value);        if (this.classList.contains('tip')) {            str += base_sel + thumb_sel[0] + a + ',' + base_sel + thumb_sel[1] + a + '{content:"' + this.value + s[idx] + '"}';        }        if (this.classList.contains('fill')) {            if (idx == 0) {                c_style = getComputedStyle(this);                u = c_style.backgroundSize.split(' ')[0].split('px')[0];                edge_w = (c_style.width.split('px')[0] - u * (max - min)) / 2;                val = (this.value - min) * u + edge_w + 'px';            } else {                val = this.value + '%';            }            if (this.classList.contains('fill-replace')) {                str += base_sel + track_sel[0] + '{background-size:' + val + '}';            }            str += base_sel + track_sel[1] + a + ',' + base_sel + track_sel[2] + a + '{width:' + val + '}';        }        styles[idx] = str;        style_el.textContent = styles.join('');    }, false);}window.CP.exitedLoop(1);

Via: http://www.w2bc.com/article/2015-12-22-four-input-ui