Own image as slider thumb on range. How to style on css

Question

How do I set an image as a thumb slider on range input type with css? It doesn't work in Internet Explorer. Chrome and Firefox is ok, but on IE my image is hidden or something? I use ::-ms-thumb, and try to set image as background. how can I fix it with CSS?

input[type="range"]::-webkit-slider-thumb 
    {
    -webkit-appearance: none;
    background-image: url('../images/slider.png');
    opacity: 1;
    width: 40px;
    height: 19px;
    position: relative;
    top: 0px;
    z-index: 99;
 }
::-moz-range-thumb{
    background-image: url('../images/slider.png');
    width:40px;
    height:19px;
   }
::-ms-thumb{
    background-image: url('../images/slider.png');
    width:40px;
    height:19px;
    z-index: 9999;
    display: block;
    background-color: transparent;
   }

IE, Chrome & Firefox Sliders http://imageshack.com/a/img401/9131/dqwb.jpg

Gery

Did you ever get a fix for this? I've got the same issue, but without the image, just trying to break the thumb out of the bounds of the slider track. – Shamblin

Answer 1

Try using

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    /* IE 10/11 specific style */
    input[type="range"]{
        -webkit-appearance: none !important;
        width:497px;
        height:22px;
        background-image:url('.png');
        background-color:rgba(0,0,0,0);
    }
    .slider::-webkit-slider-thumb{
        -webkit-appearance: none !important;
        height:70px;
        width:70px;
        background-image:url('.png');
    }
    input[type="range"]::-moz-range-track{
        -moz-appearance: none;
        width:497px;
        height:22px;
        background-image:url('.png');
        background-color:rgba(0,0,0,0);
    }
    input[type="range"]::moz-range-thumb {
        -moz-appearance: none;
        height:70px;
        width:70px;
        background-image:none;
    }

    .slider
    {
    width: 226px;
    height: 70px;
    padding: 0px;
    overflow: visible;
    }
    .slider::-ms-thumb
    {
    width: 70px;
    height: 70px;
    padding: 0px;
    border: 0px;
    display:block;
    z-index: 99999;
    background-color: transparent;
    background-image: url('res/img/button.png');
    background-position: center;
    }
    .slider:active::-ms-thumb
    {
    background-image: url('res/img/button.png');
    }
    .slider::-ms-track
    {
    height: 70px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    color: transparent;
    background-color: transparent;
    }
    .slider::-ms-fill-lower, .slider::-ms-fill-upper
    {
    height: 70px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    background-color: transparent;
    background-repeat: no-repeat;
    }
    .slider::-ms-fill-lower
    {
    background-image: url('res/img/slider.png');
    background-position: left top;
    }
    .slider::-ms-fill-upper
    {
    background-image: url('res/img/slider.png');
    background-position: right top;
    }
    input[type="range"].slider::-ms-tooltip
    {
    display: none;
    }
    /* IE 10/11 specific style */  
}

let me know if it worked

Tensive

Didn't work out of the box for me. In IE 11 it gets some weird effect, but in Chrome and Mozilla there is completely no effect at all – Ophir

Answer 2

I was struggling to do this, but, I think I have an answer.

Style your thumb with a small width/height and then apply a scale transform to it.

input[type="range"]::-webkit-slider-thumb {
  width: 1px;
  height: 1px;
  transform: scaleX(100) scaleY(100);
}

input[type="range"]::-moz-range-thumb {
  width: 1px;
  height: 1px;
  transform: scaleX(100) scaleY(100);
}    

input[type="range"]::::-ms-thumb {
  width: 10px;
  height: 10px;
  transform: scaleX(10) scaleY(10);
}

Because the transform happens after the layout, the input responds as though you are moving the tiny thumb but the displayed thumb (and 'clickable' area) are much larger.

You can play with the width, height and scaleX and scaleY values until you get the behaviour and styling you desire.

The only thing that may or may not be desirable from a user experience point of view is that if you click towards the edge of the thumb, it will snap the centre to that location.

Hope it Helps

Primo

Answer 3

Trident (Internet Explorer's rendering engine) does not allow the ::ms-thumb pseudo-element to overflow from the ::ms-track. To solve this, you will need the track to be at least as tall as the thumb image. You can still style the track to apear as if it were not the full height, with clever use of backgrounds. Here's an example.

input[type="range"] {
  height: 20px; /* must be at least your image's height */
  width: 400px; /* can be anything */
}

input[type="range"]::ms-track {
  height: 20px; /* must be at least your image's height */
  width: 100%;
  /* there are many techniques to make the track seem smaller than it is. */
  /* this technique uses a linear-gradient to make the track seem 4px tall and solid gray. */
  background: linear-gradient(to bottom, transparent 8px, #ccc 8px, #ccc 12px, transparent 12px);
  /* alternatively, if you have an image for the background: */
  background: url('track.png') no-repeat center;
}

input[type="range"]::ms-thumb {
  /* these should be the dimensions of your image */
  height: 20px;
  width: 20px;
  background: #000; /* or your image */
}

<input type="range">

Ascariasis