intervallo di input di stile per apparire come una barra di avanzamento

Question

ho un elemento video e voglio creare il mio lettore di controlli.

sto utilizzando l'intervallo di input per la barra di ricerca. Voglio per lo stile in questo modo:

in modo che il colore arancione è quello che avete visto e il verde acqua è il tempo rimasto.

sono riuscito a stile l'input come questo: https://jsfiddle.net/d3oeztwt/ ma non so circa l'arancione.

so che posso usare la barra di avanzamento ma non riesco a trovare un modo per attivare il cursore con barra di avanzamento. browser basati

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

Answer 1

Webkit/Blink/Gecko (in pratica, Chrome, Opera, Firefox) supportano solo la pista come una singola entità.

In IE, input type=range è supportato in IE10 e versioni successive. ed è possibile utilizzare ::-ms-fill-lower e ::-ms-fill-upper per personalizzare ulteriormente l'aspetto della traccia su entrambe le dimensioni del pollice.

Approfondimento: http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

Sfortunatamente, pertanto, non è attualmente possibile nella maggior dei browser moderni utilizzando gli pseudo-elementi standard javascript assente.

Answer 2

Ho fatto una soluzione cross-browser (+ ie9, ff, chrome, safari) con SCSS, senza JavaScript.

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