Guide to choosing a class::-webkit- using JavaScript or jQuery

Question

Guide to choosing a class::-webkit- using JavaScript or jQuery

I am facing difficulty in selecting a CSS class named .slider::-webkit-slider-thumb to modify a property. Despite trying various options, JavaScript doesn't seem to be targeting it.

document.addEventListener("DOMContentLoaded", function (event) {
 var slider = document.getElementById("importanceSlider");
 var knob = document.getElementsByClassName(".slider::-webkit-slider-thumb");

 knob.style.background = "#ffffff"; });

CSS:

.slidercontainer{
    width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px; 
background: #e9ecef;
outline: none;
border-radius: 50px;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10%;
height: 25px; 
background: #dc3545;
border-radius: 50px;
}

HTML:

<div class="slidecontainer">
     <input type="range" min="0" max="10" value="5" 
    class="slider" id="importanceSlider" name="importance">
</div>

I am looking to dynamically change the width value of .slider::-webkit-slider-thumb based on the slider input.

Your assistance with this matter would be highly appreciated.

javascript jquery css

Answer 1

Answer №1

It's important to note that the pseudo-selector used here is not standard...

This feature is non-standard and is not on a standards track. Avoid using it on live sites: it may not function for all users and could have compatibility issues between browsers with potential behavior changes in the future.

Exercise caution when implementing it.

If you are working within a compatible browser, there is another issue:

There appears to be confusion between querySelector and getElementsByClassName. The former allows selection based on CSS selectors while the latter does not. Additionally, the latter returns a list of nodes.

Consider utilizing a stylesheet rather than directly naming your class like this.

Below are a couple of suggested solutions:

1) querySelector

var knob = document.querySelector(".slider");
knob.classList.add('blue');

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>

2) getElementsByClassName

var knob = document.getElementsByClassName("slider");

// Select the first element from the list
knob[0].classList.add('blue');

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>

If you have multiple elements, you will need to iterate through them. This can be done with getElementsByClassName, or by using querySelectorAll:

var knobs = document.querySelectorAll(".slider");
[...knobs].forEach(knob => knob.classList.add('blue'));

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>
<button class="slider">Spam</button>
<button class="slider">Goat</button>

Answer 2

It's important to note that the pseudo-selector used here is not standard...

This feature is non-standard and is not on a standards track. Avoid using it on live sites: it may not function for all users and could have compatibility issues between browsers with potential behavior changes in the future.

Exercise caution when implementing it.

If you are working within a compatible browser, there is another issue:

There appears to be confusion between querySelector and getElementsByClassName. The former allows selection based on CSS selectors while the latter does not. Additionally, the latter returns a list of nodes.

Consider utilizing a stylesheet rather than directly naming your class like this.

Below are a couple of suggested solutions:

1) querySelector

var knob = document.querySelector(".slider");
knob.classList.add('blue');

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>

2) getElementsByClassName

var knob = document.getElementsByClassName("slider");

// Select the first element from the list
knob[0].classList.add('blue');

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>

If you have multiple elements, you will need to iterate through them. This can be done with getElementsByClassName, or by using querySelectorAll:

var knobs = document.querySelectorAll(".slider");
[...knobs].forEach(knob => knob.classList.add('blue'));

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>
<button class="slider">Spam</button>
<button class="slider">Goat</button>

Guide to choosing a class::-webkit- using JavaScript or jQuery

Answer №1

Similar questions

What could be causing NPM to generate an HTTP Error 400 when trying to publish a package?

Is there a way to update my Google Maps .html file on my android phone to pan to my current location?

Build an intricate nested array structure using the properties of an object

Is there a way to track and observe the vertical movement of an element within a directive's link function?

Optimal Strategies for Handling CSRF Tokens with AJAX Requests in Laravel 9 and Beyond

Distinguishing between setting a value in the state directly versus setting a value within an object in the

What is preventing the jQuery GET function from saving the dynamically sortable UI list?

Can you group polygons in layers using Phaser?

When attempting to call a bundle file using browserify from React, an unexpected character '�' Syntax error is thrown: react_app_testing/src/HashBundle.js: Unexpected character '�' (1:0

Trouble detecting click event in jQuery after triggering radio button in HTML

Tips for eliminating unnecessary data in written content

Challenges with JSON Documents

The duration of recorded audio in JavaScript is unclear

After selecting "ok" on the JavaScript alert dialog, the webpage will automatically refresh, causing all information entered into the textboxes to be erased

Segment the progress bar into sections

Duplicating an Angular 2 reactive form without retaining the original reference

Maximizing the Benefits: Unlocking Potential with the WD Calendar's Dropdown

Changing the li tag by clicking on it is a simple task that can be easily

The website content is not visible on Internet Explorer version 10

Showing pre-formatted HTML content that has been fetched from a JSON entity