Selector Css3

[Marcos_imasters 288]

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

 

 

[L. Henrique 179]

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; ';

[Marcos_imasters 288]

Opa amigo tstei nao vou testar obrigado.

[Marcos_imasters 288]

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%;
}

[Marcos_imasters 288]

dei conta de resolver

 

document.getElementsByClassName('progress-bar','::-webkit-slider-runnable-track')[0].style.maxWidth = loaded+'%';