JSFiddle - React, Tailwind, and code Playground

by Edison Xu

HTML

<input type="range" />

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;

JavaScript

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