Changing slider handle colour WITHOUT jQuery

Question

    .slider::-webkit-slider-thumb
    {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #00AA00;
        cursor: pointer;
    }

    .slider::-moz-range-thumb
    {
        width: 25px;
        height: 25px;
        background: #00AA00;
        cursor: pointer;
    }

Above is part of a CSS for a slider, where the attributes for the slider's handle are defined. However, I want to change the background colours above without using jQuery. How would I do this after calling the document.getElementById()?

try to use document.querySelector(selectors); https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector — lv0gun9, Mar 19 '19 at 00:49
Are you implying by "without JQuery", that regular javascript is okay? You cannot change colors via an event or trigger without a scripting language. Even keyframes require a script to assign a css class when you want to animate/change something. — Asyranok, Mar 19 '19 at 00:50
Well, you can't change the CSS of pseudo-related things, like `:hover`, `:focus`, `:after`, in JS (at least easily). — dotconnor, Mar 19 '19 at 00:55

score 1 · Accepted Answer · answered Mar 19 '19 at 00:57

There is no simple way of directly modifying a pseudo-selector. There is a rather complicated way which can be found here

If you only have a predefined number of colors you want to use the best way would be to set classes for all of the different colors you want and simply change the class of the element.

.slider::-webkit-slider-thumb
{
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #00AA00;
    cursor: pointer;
}

.slider::-moz-range-thumb
{
    width: 25px;
    height: 25px;
    background: #00AA00;
    cursor: pointer;
}

.slider.red::-webkit-slider-thumb,
.slider.red::-moz-range-thumb
{
    background: red;
}

.slider.blue::-webkit-slider-thumb,
.slider.blue::-moz-range-thumb
{
    background: blue;
}

and then for the js:

document.querySelector('.slider').className = 'slider red';

If you want to be able to set it to any random color, check out the first link I mentioned.

Changing slider handle colour WITHOUT jQuery

1 Answers1