The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can't replace thumb image on range slider in CSS

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.