Forums

Give help. Get help.

  • # July 10, 2018 at 6:43 pm

    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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag