change background image of webkit-slider-thumb by jquery

Question

I searched for a while but couldn\'t find anything useful.I have the following css

 input[type=\"range\"]::-webkit-slider-thumb {
       -webkit-appearance: none         


        

Answer 1

There is now a CSS3 way of doing this which I think is much simpler and cleaner.

In your HTML tag you define a style tag such as:

style="--img-path:url('/images/small_blue_inner.svg') no-repeat 8px 8px #fff;"

In your CSS stylesheet your background would then read:

background:var(--img-path);

You can then set your style attribute with jquery the way you normally would:

$(slider).attr('style',"--img-path:url('/images/small_ALT_Img.svg') no-repeat 8px 8px #fff;--img-border:1px solid #11b6d1");

And as you can use these in pseudo elements I believe this is the best solution for 2018.