Change Background Image Of Webkit-slider-thumb By Jquery

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; width: 20px

Solution 1:

I am posting solution which worked for me for anyone facing the same issue.As I wanted to change the css of the -webkit-slider-thumb on the fly so I did something like this I used a class for the input and added css for this class like this

.first_class::-webkit-slider-thumb {
           -webkit-appearance: none;
             width: 20px;
             height: 20px;

             border-radius: 10px;
             background-image: url('http://www.w3schools.com/html/smiley.png'),
             -webkit-gradient(
                 linear,
                 left top,
                 left bottom,
                 color-stop(0, #fefefe),
                 color-stop(0.49, #dddddd),
                 color-stop(0.51, #d1d1d1),
                 color-stop(1, #a1a1a1)
             );
             background-size:20px;
             background-repeat: no-repeat;
             background-position: 50%;
         }

I also added the other set of css under a different class name like this

.second_class::-webkit-slider-thumb {
       -webkit-appearance: none;
         width: 20px;
         height: 20px;

         border-radius: 10px;
         background-image: url('http://someotherimage/test.png'),
         -webkit-gradient(
             linear,
             left top,
             left bottom,
             color-stop(0, #fefefe),
             color-stop(0.49, #dddddd),
             color-stop(0.51, #d1d1d1),
             color-stop(1, #a1a1a1)
         );
         background-size:20px;
         background-repeat: no-repeat;
         background-position: 50%;
     }

Then using Jquery I changed the classes whenever I needed to change the css, i.e if I remove the first_class and add second_class to the input it will change the image of the -webkit-slider-thumb Thankyou for all those who tried to help.

Solution 2:

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 50px0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px1px1px#000000, 0px0px1px#0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  height: 50px;
  width: 50px;
  border-radius: 3px;
  background-color: transparent;
  background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -23px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px1px1px#000000, 0px0px1px#0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  height: 50px;
  width: 50px;
  border-radius: 3px;
  background-color: transparent;
  background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -23px;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px1px1px#000000, 0px0px1px#0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px1px1px#000000, 0px0px1px#0d0d0d;
}
input[type=range]::-ms-thumb {
  height: 50px;
  width: 50px;
  border-radius: 3px;
  background-color: transparent;
  background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -23px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

<inputtype="range" />

Solution 3:

I have a little hack way to help you.

Here I have write a same selector as input[type="range"]::-webkit-slider-thumb in a <style> tag, and append it to the last of <head>.

And then, this style will cover the background-image you ever write.

$('<style>input[type="range"]::-webkit-slider-thumb { background-image: url("http://someotherimage/test.png");}<style/>').appendTo('head');

jsFiddle Code

I have updated my anwser as T.J.

Solution 4:

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.