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;
         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;

}

Now I want to change the background image to some other image src by the help of jquery or plain javascript which I can test from chrome console.So that I have something like:

`background-image: url('http://someotherimage/test.png'),`

Could anyone please mention the correct syntax. Thanking you in anticipation of favorable response.

Answer 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.