Hi All,
CSS newbie here, please be gentle. I am desperately trying to understand why I cannot place a custom image on a range slider thumb. My graphic is 50px x 50px as specified in the css. Everything I have tried leaves me with no image for the thumb:
HTML:
CSS:
input[type=range] {
-webkit-appearance: none;
margin-top: 100px;
width: 640px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 50px;
width: 50px;
background-image: url(‘assets/Knob-h.png’) no-repeat;
cursor: pointer;
margin-top: -20px;
}
input[type=range]::-webkit-slider-runnable-track {
top: 100px;
left: 50px;
width: 640px;
height: 8px;
cursor: pointer;
animate: 0.2s;
background: #FF00FF;
}
FWIW, I am only interested in webkit/blink compatible browsers.
Any ideas?
Cheers, Phil.
