CODEWITHSUNDEEP
htmlcsswebkit
Pablo Gonzalez
Pablo Gonzalez

Reputation: 693

change color of range sliders

I am newbie in web programming so this question will looks easy for most of you.

I have 3 range sliders and I want to set a different color for each one (red, green and blue) so what is the best way to set the color. Using body on load, by id or any other way?

The demo is here https://codepen.io/fast7027/pen/zXLOem

<div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeR">
                        </div>
                        <div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeG">
                        </div>
                        <div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeB">
                        </div>

Upvotes: 0

Views: 127

Answers (1)

mackbex
mackbex

Reputation: 69

i would use css with id and ::-webkit-slider-thumb this property.

in the property, there's box-shadow.

try just put in below.

box-shadow: -100vw 0 0 100vw #007aff;

the #007aff is blue but if you use it with your id then you can change the slider what color you want.

example in your css,

#rangeR::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Red;
}
#rangeG::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Green;
}
#rangeB::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Blue;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; /* 1 */
    height: 20px;
    background: #fff;
    border: 2px solid #999; /* 1 */
}

Upvotes: 1

Related Questions