Zakres wprowadzania stylu, który wygląda jak pasek postępu

Question

Mam element wideo i chcę utworzyć własny odtwarzacz kontrolek.

Używam wprowadzania zakresu dla paska wyszukiwania. chcę projektować je tak:

więc pomarańczowy to, co widziałeś i morski to czasu.

Udało mi się ukształtować dane wejściowe w ten sposób: https://jsfiddle.net/d3oeztwt/, ale nie wiem o pomarańczach.

Wiem, że mogę korzystać z paska postępu, ale nie mogę znaleźć sposobu na uruchomienie suwaka za pomocą paska postępu.

<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 przeglądarek opartych (zasadniczo, Chrome, Opera, Firefox) obsługuje tylko tor jako jeden podmiot.

W wersji IE input type=range jest obsługiwany w IE10 i nowszych wersjach. i możesz użyć ::-ms-fill-lower i ::-ms-fill-upper, aby jeszcze bardziej dostosować wygląd ścieżki na dowolnym rozmiarze kciuka.

Więcej szczegółowych informacji na stronie: http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

Niestety, w związku z tym, nie jest obecnie możliwe w większości nowoczesnych przeglądarekwykorzystujących standardowe pseudo-elementy nieobecny javascript.

Answer 2

Zrobiłem rozwiązanie oparte na przeglądarce (+ ie9, ff, chrome, safari) z SCSS, bez 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; 
    } 
}