Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal boa tarde,
eu não entedo muito de css3,
eu achei um code css3 de um slider que usso como input ranger
<input type="range" class="progress-bar" />
ate ai tudo bem queria muda uma coisa no css
ele esta assim
input[type=range].progress-bar::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: #666;
height: 6px;
max-width:0%;
}queria muda o max-width mais nao conseguir tentei da seguinte forma
document.querySelectorAll('input[type=range].progress-bar')[0].style['-webkit-slider-runnable-track'].style.maxWidth ='50%;';
e tabem
doc.querySelectorAll('input[type=range].progress-bar')[0].style['-webkit-slider-runnable-track'] =' max-width:'+loaded+'%;';
sem nenhum resultado possitivo desde ja agradeço
Opa amigo tstei nao vou testar obrigado.
Olá testei aqui não deu certo,
queria era realmente alterar o max-width
com javascprit mais nao conseguir.
input[type=range].progress-bar::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: #666;
height: 6px;
max-width:0%;
}dei conta de resolver
document.getElementsByClassName('progress-bar','::-webkit-slider-runnable-track')[0].style.maxWidth = loaded+'%';
Mascos,
Fiquei meio em dúvida com a sua questão, mas pra você definir valores mínimos e máximos de um type range é só definir no próprio HTML.
Exemplo:
<input type="range" class="progress-bar" min="0" max="150" step="any">
EDITADO:
Acabei lendo rápido demais e não prestei atenção no fim da pergunta. Você tentou adicionar o elemento !important após o loaded?
Exemplo:
doc.querySelectorAll('input[type=range].progress-bar')[0].style['-webkit-slider-runnable-track'] ='max-width:'+loaded+'% !important; ';