How Can I Style HTML5 Range Inputs with Different Colors on Each Side?

Styling HTML5 Range Inputs with Different Colors on Each Side

Achieving varying colors before and after the slider of an HTML5 range input requires browser-specific approaches.

Chrome:

• Hide the default slider by setting overflow: hidden and width on the input element.
• Fill the area to the left of the thumb with the desired background color.
• Create a custom slider thumb and position it 80px to the right of the thumb's natural position.
• Ensure the custom thumb is larger than the width of the input to cover the default thumb completely.

IE:

• Leverage the ::-ms-fill-lower pseudo-element to set the background color to the left of the thumb.
• Use ::-ms-fill-upper to set the background color to the right of the thumb.

Firefox:

• Utilize the ::-moz-range-progress pseudo-element to set the background color to the left of the thumb.
• Set the background color of the track using ::-moz-range-track.

Example Code:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    background-color: #9a905d;
  }

  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    color: #13bba4;
    margin-top: -1px;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    cursor: ew-resize;
    background: #434343;
    box-shadow: -80px 0 0 80px #43e5f7;
  }
}

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}

input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}

<input type="range" />

The above is the detailed content of How Can I Style HTML5 Range Inputs with Different Colors on Each Side?. For more information, please follow other related articles on the PHP Chinese website!