CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TobiasW
TobiasW

Reputation: 891

Change pure HTML Slider-Thumb color with jquery (working css included)

I want to change the Slider-thumb color with jquery, but the problem is, that the same CSS-code, which I use in the StyleSheet is not working anymore if I use it with jquery. The example below has a working css to change the thumb color, and a jquery button, which should do the same. Is there any solution, how this can be done with jquery?

Edit: The thumb is the thing which is moved. In this case the big round blue one. I want to change the thumb and not the track

HTML

<input class="topcoat-range-input" type="range" value="0" min="0" max="100" data-role="none" step="1">
<div class='button'>Change Color!</div>

CSS

.topcoat-range-input::-webkit-slider-thumb {
    height: 40px;
    width: 40px;
    border: 1px solid rgba(0, 0, 0, 0.36);
    border-radius: 30px;
    background: rgba(131, 208, 255, 0.75);
    box-shadow: 0 0 20px 2px rgba(131, 208, 255, 0.75);
}

JavaScript

$('.button').on('click', function (e) {
    $('.topcoat-range-input::-webkit-slider-thumb').css('background', 'rgba(255, 208, 255, 0.75)');
});

Demo

http://jsfiddle.net/qcn6tmpz/3/

Upvotes: 1

Views: 4679

Answers (4)

ozkary
ozkary

Reputation: 2694

Another way to do this is to define classes with the background color for the thumb. When the value changes, set the corresponding class name that maps to that value. For example, if the value if the slider is 2, we define a class name that provides the intended background color:

.slider2::-webkit-slider-thumb {    
background: gray;

}

The JS that handles the class mapping should look like this. 

var styles = {"1":"slider1","2":"slider2","3":"slider3"};

slider.oninput = function() {      
  slider.className = 'slider ' + styles[this.value];
}

Take a look at this link for more details:

http://www.ozkary.com/2017/11/input-range-slider-with-color-indicator.html

Upvotes: 0

patrykf
patrykf

Reputation: 449

Wrong jQuery selector

$('.button').on('click', function (e) {
    $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

In your case I would try to override css for this button .

.topcoat-range::-webkit-slider-thumb

Plain javascript seems to work:

for(var j = 0; j < document.styleSheets[1].rules.length; j++) {
    var rule = document.styleSheets[1].rules[j];
    if(rule.cssText.match("webkit-slider-thumb")) {
        rule.style.backgroundColor="rgba(255, 208, 255, 0.75)";
    }
}

Upvotes: 2

klasske
klasske

Reputation: 2174

It works fine if you remove the ::-webkit part:

$('.button').on('click', function (e) {
    $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

EDIT: Since you need the -webkit part, one (slightly messy) way of doing this, would be to add a style rule each time you click the button:

$('.button').on('click', function (e) {
    $("<style type='text/css'>.topcoat-range-input::-webkit-slider-thumb{background:rgba(255, 208, 255, 0.75)}</style>").appendTo($("head"));
});

Upvotes: 3

Suraj Rawat
Suraj Rawat

Reputation: 3763

Attach event correctly to the div with class .button

 $(document).on('click','.button', function (e) {

   $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

**

http://jsfiddle.net/qcn6tmpz/4/

Upvotes: 0

Related Questions