Комбинированое использование JS + CSS3

[cupoma58]

Привет. Эта тема - плавно вытекла из предыдущей.
Есть в стилях такой прибамбас:

background:linear-gradient(to right, #222 50%, #666 50%);

Если добавить переменную:

var procent = (volume.value * 100) / volume.max;

то - получится рабочий код:

volume.addEventListener('input',()=>{   
    var procent = (volume.value * 100) / volume.max;
        volume.style.background = `linear-gradient(to right, #ffb90f ${procent}%, #363636 ${procent}%)`;
        video.volume = volume.value; 
});

Если код немного изменить:

video.addEventListener('timeupdate',()=>{ 
    var procent = (video.currentTime * 100) / video.duranion;
        progres.value = Math.floor(video.currentTime); 
        progres.style.background = `linear-gradient(to right, #ffb90f ${procent}%, #363636 ${procent}%)`; 
        curtime.innerHTML = videoTime(video.currentTime);
});

то он - перестаёт работать.
Не могу понять - в чём дело?

[Nexus]

Не могу понять - в чём дело?

В консоли ошибки смотрели?

[cupoma58]

В консоли ошибки смотрели?

В консоли (инструменты разработчика, браузера) - чисто.

[Nexus]

cupoma58, значит либо все работает как и положено, либо событие вовсе не срабатывает.
Пробуйте дебажить. Проверьте для начала, что слушатель события хотя бы вызывается.

[cupoma58]

либо событие вовсе не срабатывает

Событие - срабатывает - ползунок - ползает, цвета итога - не видно.

[Nexus]

cupoma58, если все работает и без ошибок, а результата не видно, значит проблема в вашем css, который генерирует js-код.

Вы бы лучше небольшой макетик сделали, который демонстрирует вашу проблему, было бы куда эффективнее.

[cupoma58]

значит проблема в вашем css

Может-быть, проблема в том, что и прогресс и звук - оба под input?
Именно так всё задумывалось.
CSS:

input[type=range]{
    -webkit-appearance: none;
    height: 3px;  
    background: #363636;
    cursor: pointer;   
}
input[type=range]::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    width: 100%; 
 
}
input[type=range]::-webkit-slider-thumb{            
    -webkit-appearance: none;
    height: 9px;
    width: 9px;
    border-radius: 9px;
    background: #ffb90f;   
}

[voraa]

Событие - срабатывает - ползунок - ползает, цвета итога - не видно.

Опять же дебажить. Посмотреть элементы и какой style присваивается.

[cupoma58]

Стиль отражается только по звуку.
Всё, проблема решена. Синтаксическая ошибка в исходном коде - > video.duranion, на соседнем форуме подсказали.
Растуды его туды!

[Nexus]

Синтаксическая ошибка в исходном коде

В консоли (инструменты разработчика, браузера) - чисто.