Quindi, di recente, ho modificato lo stile del dispositivo di scorrimento della gamma html.Dispositivo di scorrimento Html Range con Javascript
Mi sono imbattuto in una penna su una codepen che aveva qualcosa di diverso da alcuni progetti davvero ispiratori, alcuni dei quali funzionanti.
Questo è il codice sorgente da uno.
HTML:
<input type="range" data-idx="1">
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);
}
Questa grande opera per una r elemento di ange ma se provo ad aggiungere più elementi di intervallo sulla stessa pagina e cambi l'attributo di dati in data-idx="2" non funzionerà, il primo intervallo li controllerà tutti.
Come posso regolare il codice per far funzionare ciascuna gamma in modo indipendente?
Ecco un JSFiddle del codice che sto utilizzando, per qualche motivo il javascript non funziona sul lì a tutti, ma è funziona bene su codepen? Hmm ...
Ecco l'originale Codepen
Non funziona su codepen con più elementi IDX sia – rafaelcastrocouto
Sì, lo so, è per questo che ho bisogno di regolare il javascript. – Jordan
Ok, l'ho risolto! non un grosso problema ... solo qualche strano codice da babydino con quelli idx e/deep/stuff rsrss – rafaelcastrocouto