Change a "class" element with js?

programming web dev
1

When using HTML <input id="_Slider" class="slider" type="range" an icon can be used for the slider button with “background: url (icon.png|.jpg|…)”. This is best done with a class definition.
Since the icon should be changed for certain situation (arrow to the right or left or up) only the value “background: url ()” would have to be adjusted. However, I can’t find how to change a single element of a class definition. The workaround would be one (or more) class definitions exchanged by javascript. Is there an easier way?

2

You can change CSS vars with JS and not change the class.

You can just directly set and then change the background with JS.

You can inline the background e.g style = “background : url()” then change it with JS.

TBH if I was doing it I would morph an SVG path depending on position BUT that is definitely not easier :smiley:

It all depends on the animation effect that you want to achieve…

3

@steve.mills
Thank you very much for your help. And yes, changing a class element like “background:” works using a CSS variable (formally called “CSS Custom Property”).
I was unsure because I have a double slider with buttons/thumbs to be manipulated based on specific situations. Besides, these thumbs need to be addressed with CSS pseudo elements.
Now, part of the project is as follows:

        .dualslider {
            -webkit-appearance: none;
            appearance: none;
            height: 8px;
            width: 100%;
            position: absolute;
            background-color: #C6C6C6;
            pointer-events: none;
        }

        .dualslider::-webkit-slider-thumb {
            -webkit-appearance: none;
            pointer-events: all;
            width: 24px;
            height: 24px;
            background: var(--diamond);
            background-size: 80%;
            background-position: center;
            background-repeat: no-repeat;
            background-color: none;
            cursor: pointer;
        }

sliders

1 Like
4

thanks for useful information!!