javascript range 转为 html,带有Javascript的Html Range滑块

所以我最近一直在搞乱html范围滑块的样式.

我在codepen上遇到了一支笔,它有一些非常鼓舞人心的设计,其中一些功能正常.

这是一个源代码.

CSS：

html {

background: #393939;

}

input[type='range'] {

display: block;

margin: 2.5em auto;

border: solid .5em transparent;

padding: 0;

width: 15.5em;

height: 1em;

border-radius: .25em;

background: transparent;

font-size: 1em;

cursor: pointer;

}

input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {

-webkit-appearance: none;

}

input[type='range']::-webkit-slider-runnable-track {

width: 15.5em;

height: 0.5em;

border-radius: 0.25em;

background: #fff;

}

.js input[type='range']::-webkit-slider-runnable-track {

background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;

}

input[type='range']::-moz-range-track {

width: 15.5em;

height: 0.5em;

border-radius: 0.25em;

background: #fff;

}

.js input[type='range']::-moz-range-track {

background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;

}

input[type='range']::-ms-track {

border: none;

width: 15.5em;

height: 0.5em;

border-radius: 0.25em;

background: #fff;

color: transparent;

}

input[type='range']::-ms-fill-lower {

border-radius: 0.25em;

background: #e44e4f;

}

input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track {

background-size: 50% 100%;

}

input[type='range']:nth-of-type(1)::-moz-range-track {

background-size: 50% 100%;

}

input[type='range']:nth-of-type(1)::-webkit-slider-thumb {

margin-top: -0.125em;

border: none;

width: 0.75em;

height: 0.75em;

border-radius: 50%;

box-shadow: 0 0 0.125em #333;

background: #fff;

}

input[type='range']:nth-of-type(1)::-moz-range-thumb {

border: none;

width: 0.75em;

height: 0.75em;

border-radius: 50%;

box-shadow: 0 0 0.125em #333;

background: #fff;

}

input[type='range']:nth-of-type(1)::-ms-thumb {

border: none;

width: 0.75em;

height: 0.75em;

border-radius: 50%;

box-shadow: 0 0 0.125em #333;

background: #fff;

}

input[type='range']:nth-of-type(1)::-ms-tooltip {

display: none;

}

input[type='range']:focus {

outline: none;

box-shadow: 0 0 0.25em #e44e4f;

}

使用Javascript：

var s = document.createElement('style'),

r = document.querySelectorAll('input[type=range]'),

prefs = ['webkit-slider-runnable', 'moz-range'],

styles = [],

l = prefs.length

n = r.length;

document.body.appendChild(s);

var getTrackStyleStr = function(el) {

var str = '',

j = el.dataset.idx,

min = el.min || 0,

perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value,

val = perc + '% 100%';

for(var i = 0; i < l; i++) {

str += '.js input[type=range]:nth-of-type(' + j + ')::-' + prefs[i] + '-track{background-size:' + val + '}';

}

return str;

};

var getTipStyleStr = function(el) {

var str = '.js input[type=range]:nth-of-type(' + el.dataset.idx + ') /deep/ #thumb:after{content:"' + el.value + '%"}';

return str;

};

for(var i = 0; i < n; i++) {

styles.push('');

r[i].addEventListener('input', function() {

styles[this.dataset.idx] = getTrackStyleStr(this);

if(this.classList.contains('tip')) {

styles[this.dataset.idx] += getTipStyleStr(this);

}

s.textContent = styles.join('');

}, false);

}

这适用于一个范围元素,但如果我尝试在同一页面上添加更多范围元素,并将数据属性更改为data-idx =“2”则不起作用,第一个范围将控制它们全部.

如何调整代码以使每个范围独立工作？

这是我正在使用的JSFiddle代码,由于某种原因,javascript根本就没有工作,但它在codepen上工作正常吗？嗯…