i have a video element and i want to create my own controls player.

i'm using range input for the seek bar. i want to style it like this:

[![enter image description here](https://i.stack.imgur.com/ceIk1.png)](https://i.stack.imgur.com/ceIk1.png)

so the orange is what you have seen and the teal is the time left.

i managed to style the input like this: <https://jsfiddle.net/d3oeztwt/> but i don't know about the orange.

i know i can use progress bar but i can't find a way to trigger the slider with progress bar.

```
<input type="range">

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 10px;
    background: #009999;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #99FFFF;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}

```