Skip to main content


This topic contains 0 replies, has 1 voice, and was last updated by  philmoore174 7 months, 1 week ago.

Viewing 1 post (of 1 total)
  • Author
  • #273919


    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:


    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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star