범위 컨트롤 크로스 브라우저의 하단 부분을 채우십시오.

Question

예를 들어, this fiddle (IE에는 없으십시오)을 확인하십시오.

는 (사용자가 this link의 제어에 대한 설명을 볼 수있다.)

그녀는 -ms 필 저급 사용과 같은--ms 칠 상부 엄지 어느 쪽의 색을 제어 할 이 :

input[type=range]::-ms-track { 
    width: 300px; 
    height: 5px; 

    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ 
background: transparent; 

    /*leave room for the larger thumb to overflow with a transparent border */ 
    border-color: transparent; 
    border-width: 6px 0; 

    /*remove default tick marks*/ 
    color: transparent; 
} 
input[type=range]::-ms-fill-lower { 
    background: #777; 
    border-radius: 10px; 
} 
input[type=range]::-ms-fill-upper { 
    background: #ddd; 
    border-radius: 10px; 
} 
input[type=range]::-ms-thumb { 
    border: none; 
    height: 16px; 
    width: 16px; 
    border-radius: 50%; 
    background: goldenrod; 
} 
input[type=range]:focus::-ms-fill-lower { 
    background: #888; 
} 
input[type=range]:focus::-ms-fill-upper { 
    background: #ccc; 
} 

The result (in IE) http://brennaobrien.com/assets/blog/custom-slider-ie-updated.png

그러나, 지금까지 내가 말할 수있는 ... ::-ms- ... 의사 요소는 IE에서 작동합니다. 크롬에서 위의 코드는 효과가없는 것 같습니다. 크롬, 난 그냥이와 끝까지 :

The result (in Chrome) http://brennaobrien.com/assets/blog/custom-slider.png

내가이 효과 크로스 브라우저를 달성하기 위해 무엇을 할 수 있는가?

감사합니다. 예를 들어 http://codepen.io/ryanttb/pen/fHyEJ :

Answer 1

당신은 이쪽을 봐, 그라데이션을 사용하여이 효과를 얻을 수

물론

input::-moz-range-track{ 
    background: linear-gradient(90deg,black 50%,grey 50%); 
} 

당신이 백분율 값을 변경뿐만 아니라 JS가 필요합니다.

Answer 2

그라디언트의 희미한 모양을 원하지 않으면 HTML5로 표준 배경 크기를 선택하는 것이 좋습니다. 튜토리얼을 중심으로 내 범위를 https://www.w3schools.com/howto/howto_js_rangeslider.asp에 작성했습니다.

그래서 내 솔루션은 CSS에서였다

jQuery로 다음

.slidecontainer { 
    display:inline-block; 
    vertical-align:middle; 
    width: 60%; 
    position:relative; 
    margin:5px 0; 
    background:url('/images/cyan_back.png') no-repeat left top; 
    background-size:0 14px; 
    border-radius:7px; 
} 

:

$('.slidecontainer').css('background-size',$(this).val()+'% 14px');

나는이 또한 조금 더 크로스 브라우저 친화 믿습니다.