Thumb styling for input type "range" not working in IE

Question

I have following css for styling the thumb. It works fine on chrome, Safari and firefox. However is not working even on IE 10 and above. The thumb is retaining its default style as if no css have been written to style it.

input[type='range']::-webkit-slider-thumb, input[type='range']::-moz-range-thumb, input[type='range']::-ms-thumb {
  width: 30px;
  height: 30px;
  background: #FF6347;
}

Answer 1

Just figured out the cause of this issue. We can't comma-separate these type of selectors. I just seggregated them as below and it started working for IE as well. Was getting this aggregated because of SASS was being used to aggregate the common properties.

input[type='range']::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  background: #fff;
}

input[type='range']::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background: #fff;
}

input[type='range']::-ms-thumb {
  width: 30px;
  height: 30px;
  background: #fff;
}