0

I want to change the Thumb color for my slider, but I need to select the thumb with '.topcoat-range-input::-webkit-slider-thumb'. This selector is not working with css, I think because it includes a vendor prefix. Is there a possibility to fix that issue? I want to pick the color dynamically, so I can't simply append a class.

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

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

A possible solution would be this one, but i hoped on simple way to do this:

$('.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"));
});
TobiasW
  • 861
  • 3
  • 13
  • 36
  • 1
    why dont you just apply a class which defines the CSS rule with pseudo selector... – Vishwanath Aug 27 '14 at 07:05
  • Because I want to change the color dynamically, actually I pick the color from an image and set it to the thumb. – TobiasW Aug 27 '14 at 07:18
  • Does this :::[jsfiddle](http://jsfiddle.net/molokoloco/f6Z3D/)::: Help? Found this on google, a simple function that lets you get browser specific CSS styles names properties, and then apply styles to it via cssProp. – mk117 Aug 27 '14 at 08:07

2 Answers2

4

You can apply the class on click and have your CSS rule defined for the selector. Updated fiddle here. http://jsfiddle.net/qcn6tmpz/9/

$('.button').on('click', function (e) {
    $('.topcoat-range-input').addClass('applied');
});


.topcoat-range-input.applied::-webkit-slider-thumb {
    background : rgba(255, 208, 255, 0.75);
}
Vishwanath
  • 6,284
  • 4
  • 38
  • 57
  • For sure, the problem here is, that I change the color dynamically in the code – TobiasW Aug 27 '14 at 07:13
  • Do u have the definite list of colors, if yes you can just define the class for them and use it. If you dont have the definite colors and u get them dynamically then you can have look at this to create class dynamically http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply/8630641#8630641 I know bit too much for this small problem... – Vishwanath Aug 27 '14 at 07:15
  • Well it seems that there is no simple solution for this simple problem, but I think I will use this solution : $('.button').on('click', function (e) { $("").appendTo($("head")); }); – TobiasW Aug 27 '14 at 07:17
  • link I shared in comment does the same thing of creating class at the run time, which is what your solution is doing. I would have gone for my solution, cause thats clear and clean... – Vishwanath Aug 27 '14 at 07:21
  • So can you help me with the implementation? I tried it this way, but it is not working for me. http://jsfiddle.net/qcn6tmpz/10/ – TobiasW Aug 27 '14 at 07:33
  • Adding important to the rule made it work. Needed it for overriding previous rule. http://jsfiddle.net/qcn6tmpz/11/ – Vishwanath Aug 27 '14 at 08:12
0

For FYI: You can't do it the way you want the way vishvanath do it is the only best way you can do it.

reason: '::' <- this is not accepted by jquery selectore parser so even if you backslash them like

$('.topcoat-range-input//://:-webkit-slider-thumb').css('background', 'rgba(255, 208, 255, 0.75)');

still wont work because as per w3 guidelines: "Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning."

For your problem of choosing colour dynamically Use Less css and then pass colour in the ass class function of vishwanath

Abs
  • 417
  • 4
  • 9