html - style input range to look like a progress bar -

i have video element , want create own controls player.

i'm using range input seek bar. want style this:

so orange have seen , teal time left.

i managed style input this: https://jsfiddle.net/d3oeztwt/ don't know orange.

i know can use progress bar can't find way trigger slider progress bar.

<input type="range">   input[type=range] {     /*removes default webkit styles*/     -webkit-appearance: none;     /*required 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; } 

i did cross-browser solution (+ie9, ff, chrome, safari), css.

http://codepen.io/nlfonseca/pen/mwbovq

@import 'bourbon';  $slider-width-number: 240; $slider-width: #{$slider-width-number}px; $slider-height: 2px; $background-slider: #c7c7c7; $background-filled-slider: #e33d44; $thumb-width: 28px; $thumb-height: 18px; $thumb-radius: 8px; $thumb-background: #fff; $thumb-border: 1px solid #777; $shadow-size: -8px; $fit-thumb-in-slider: -8px;  @function makelongshadow($color, $size) {   $val: 5px 0 0 $size $color;    @for $i 6 through $slider-width-number {     $val: #{$val}, #{$i}px 0 0 $size #{$color};   }    @return $val; }  div {   height: 100px;   display: flex;   justify-content: center; }  input {   align-items: center;   appearance: none;   background: none;   cursor: pointer;   display: flex;   height: 100%;   min-height: 50px;   overflow: hidden;   width: $slider-width;    &:focus {     box-shadow: none;     outline: none;   }    &::-webkit-slider-runnable-track {     background: $background-filled-slider;     content: '';     height: $slider-height;     pointer-events: none;   }    &::-webkit-slider-thumb {     @include size($thumb-width $thumb-height);      appearance: none;     background: $thumb-background;     border-radius: $thumb-radius;     box-shadow: makelongshadow($background-slider, $shadow-size);     margin-top: $fit-thumb-in-slider;     border: $thumb-border;   }     &::-moz-range-track {     width: $slider-width;     height: $slider-height;   }    &::-moz-range-thumb {     @include size($thumb-width $thumb-height);      background: $thumb-background;     border-radius: $thumb-radius;     border: $thumb-border;     position: relative;   }    &::-moz-range-progress {     height: $slider-height;     background: $background-filled-slider;     border: 0;     margin-top: 0;   }    &::-ms-track {     background: transparent;     border: 0;     border-color: transparent;     border-radius: 0;     border-width: 0;     color: transparent;     height: $slider-height;     margin-top: 10px;     width: $slider-width;   }    &::-ms-thumb {     @include size($thumb-width $thumb-height);      background: $thumb-background;     border-radius: $thumb-radius;     border: $thumb-border;   }    &::-ms-fill-lower {     background: $background-filled-slider;     border-radius: 0;   }    &::-ms-fill-upper {     background: $background-slider;     border-radius: 0;   }    &::-ms-tooltip {     display: none;   } }