슬라이더 전후에 다른 색상을 갖도록 HTML5 범위 입력 스타일을 지정하는 방법은 무엇입니까?

슬라이더 전후에 다른 색상을 갖도록 HTML5 범위 입력 스타일을 지정하는 방법은 무엇입니까?

---

왼쪽은 녹색이고 오른쪽은 회색입니다. 위의 그림과 같이 완벽합니다. 가급적 순수한 CSS 솔루션 (WebKit에 대해서만 걱정할 필요가 있음).

그런 일이 가능합니까?

---

순수한 CSS 솔루션 :

• Chrome : 에서 오버플로를 숨기고 input[range]왼쪽의 모든 공간을 그림자 색상으로 채 웁니다.
• IE : 바퀴를 재발 명 할 필요가 없습니다.::-ms-fill-lower
• Firefox 는 바퀴를 재발 명 할 필요가 없습니다 :::-moz-range-progress

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

<input type="range"/>

---

예, 가능합니다. input rangeHTML5 및 HTML5에 추가 된 새로운 요소는 초안 일 뿐이므로 (그리고 오래 지속될 것이므로) 모든 브라우저에서 제대로 지원되지 않기 때문에 권장하지는 않지만 스타일링에 관해서는 아마도 최고가 아닐 것입니다. 선택.

Also, you'll need a bit of JavaScript too. I took the liberty of using jQuery library for this, for simplicity purposes.

Here you go: http://jsfiddle.net/JnrvG/1/.

---

A small update to this one:

if you use the following it will update on the fly rather than on mouse release.

"change mousemove", function"

<script>
$('input[type="range"]').on("change mousemove", function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #2f466b), '
                + 'color-stop(' + val + ', #d3d3db)'
                + ')'
                );
});</script>

---

While the accepted answer is good in theory, it ignores the fact that the thumb then cannot be bigger than size of the track without being chopped off by the overflow: hidden. See this codepen for an example of how to handle this with just a tiny bit of JS.

https://codepen.io/saintwycliffe/pen/VBGYXN

---

The previous accepted solution is not working any longer.

range커서 앞에 필요한 막대를 추가하여 스타일이 지정된 컨테이너 에을 래핑하는 간단한 함수를 코딩했습니다 . CSS에 설정된 '파란색'과 '주황색'의 두 가지 색상을 쉽게 볼 수 있도록 이 예제를 작성 하여 빠르게 수정할 수 있습니다.

---

이제 각 WebKit, Firefox 및 IE의 의사 요소로 지원됩니다. 그러나 물론 그것은 각각 다릅니다. : (

참조 이 질문 의 답을 및 / 또는이라는 CodePen를 검색 할 prettify <input type=range> #101몇 가지 솔루션.

---

input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

위의 코드는 범위 입력 스타일을 변경합니다 .....

참조 URL : https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider