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

Styling HTML5 Range Input with Different Colors on Either Side

Styling HTML5 range inputs to have contrasting colors on the left and right sides is a common request. As the user interacts with the slider, the color changes dynamically, giving visual feedback on the input value. Achieving this effect in pure CSS may seem like a challenge, but it's possible.

For Chrome, the trick lies in hiding the overflow from the input and using a box shadow to fill the remaining space with the desired color. This technique effectively paints the left side of the slider with a custom color.

For IE and Firefox, we can leverage built-in CSS pseudo-elements:

• In IE: ::-ms-fill-lower allows you to style the lower portion of the slider, enabling the green color.
• In Firefox: ::-moz-range-progress gives you similar control, allowing you to define the color for the filled portion of the slider.

To illustrate the CSS solution, refer to the following code:

@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;
  }
}

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;
}

Using this CSS code, you can style your HTML5 range input to display different colors on either side of the slider, creating a visually appealing and user-friendly interface for your web application.

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