I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled.
I attempted adding a class to the thumb like this:
input[type=range]::-webkit-slider-thumb.disabled
and also tried adding the disabled directive:
input[type=range]::-webkit-slider-thumb:disabled
but neither of these solutions are working.
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2px solid #ffffff;
height: 22px;
width: 22px;
border-radius: 50%;
background: linear-gradient(#FF6C2C,#FF2626);
margin-top: -9px;
z-index: 4;
}
I want it to look something like this:
input[type=range]::-webkit-slider-thumb:disabled {
background: #CCCCCC;
}
Is there another way to achieve this? I'm unable to use jQuery for this task.