Selector Css3

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