Style Input Range

Base Style

<input type="range" max="100" min="1" value="1" step="1">
input[type=range]:focus {
  outline: none;
}

/* for chrome and ff */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  input[type=range] {
    -webkit-appearance: none;
    width: 300px;
    background: #edf1f4;
    height: 4px;
    border-radius: 2px;
  }
}

Chrome

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
  border: 1px solid #e1e7ed;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}

FireFox

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  /* background: #edf1f4; */
  border-radius: 2px;
}

input[type=range]::-moz-range-thumb {
  border: 1px solid #e1e7ed;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

IE (10+)

input[type=range]::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: transparent;
  color: transparent;

  /* 这里border来处理ie的thumb不能超出track大小的问题 */
  border-color: transparent;
  border-width: 6px 0; 
}

/* value部分的颜色 */
input[type=range]::-ms-fill-lower {
  border-radius: 10px;
  background: #577bf9;
}

input[type=range]::-ms-fill-upper {
  background: #edf1f4;
  border-radius: 10px;
}

input[type=range]::-ms-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e1e7ed;
  cursor: pointer;
}

Chrome和FireFox中没有类似IEfill-lower的样式,如果要实现修改thumb之前track的样式,可以写:

input.oninput = function() {
    var max = Number(input.getAttribute('max'));
    var min = Number(input.getAttribute('min'));
    var percent = ((Number(input.value) - min) / (max - min)) * 100;
    this.style.background = 'linear-gradient(to right, #577bf9 0%, #577bf9 ' + percent + '%, #edf1f4 ' + percent + '%, #edf1f4 100%)';
  };

参考:
css - How to style HTML5 range input to have different color before and after slider? - Stack Overflow

How to Style Input Type Range in Chrome, Firefox, and IE | Brenna O’Brien

Comments
Write a Comment