range slider thumb css issue in IE and Edge

Question

I am creating a range slider for my site which needs to look same on all browser. I am having an issue with slider thumb size in IE and Edge now. I am unable to increase the height of thumb more than the slider track

Chrome and Firefox:

IE and Edge:

Code:

<input type="range" min="1" max="100" step="1" value="15">

CSS:

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
     outline:none !important;
    border-radius: 6px;
    height: 8px;
    width:100%;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, orange),
        color-stop(0.15, #C5C5C5)
    );
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    cursor:pointer;

    background-color: orange;
    border: 1px solid orange;
    height: 20px;
    width: 20px;
    border-radius:50%;
    transition:100ms;

}



input[type='range']:hover::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    cursor:pointer;

    background-color: orange;
    border: 1px solid orange;
    height: 25px;
    width: 25px;
    border-radius:50%;

}


/*Firefox */

  input[type="range"]::-moz-range-thumb {

  background-color: orange;
    border: 1px solid orange;
    height: 20px;
    width: 20px;
    border-radius:50%;
    cursor:pointer;
  }

  input[type="range"]:hover::-moz-range-thumb {

  background-color: orange;
    border: 1px solid orange;
    height: 25px;
    width: 25px;
    border-radius:50%;
    cursor:pointer;
  }


input[type=range]::-moz-range-track {
  background:none;
}



/*IE and Edge */

input[type=range]::-ms-thumb{

  background-color: orange;
    border: 1px solid orange;
    height: 20px;
    width: 20px;
    border-radius:50%;
    cursor: hand;
  }


input[type=range]::-ms-fill-upper {
    background-color: #C5C5C5;

  }

input[type=range]::-ms-fill-lower {
   background-color: orange;

  }

  input[type=range]::-ms-track {

border:none;
color:transparent;
height:8px;
}

input[type="range"]::-ms-tooltip {
    display: none; /*tooltip makes thumb sliding lagy*/
}

Jquery:

$('input[type="range"]').on('input change',function(){

    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', orange), '
                + 'color-stop(' + val + ', #C5C5C5)'
                + ')'
                );
});

After going through the link http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html found that IE won't let the thumb overflow the track. But there is a workaround mentioned in it. I am able to make that change after adjusting the input[type="range"] height. But that changing the format in chrome and firefox.

Is there anyway to to resolve it.

Fiddle: https://jsfiddle.net/anoopcr/ssbx0anj/55/

Answer 1

The code below shows a cross-browser slider that is working on Edge as well:

 .wrap { float: left; position: relative; margin: 0 0.5em 0.5em; padding: 0.5em; height: 12.5em; width: 1.5em; } [type='range'] { position: absolute; top: 50%; left: 50%; margin: 0; padding: 0; width: 12.5em; height: 1.5em; transform: translate(-50%, -50%) rotate(-90deg); background: transparent; font: 1em arial, sans-serif; } [type='range'], [type='range']::-webkit-slider-thumb { -webkit-appearance: none; } [type='range']::-webkit-slider-runnable-track { box-sizing: border-box; border: none; width: 12.5em; height: 0.25em; background: #ccc; } [type='range']::-moz-range-track { box-sizing: border-box; border: none; width: 12.5em; height: 0.25em; background: #ccc; } [type='range']::-ms-track { box-sizing: border-box; border: none; width: 12.5em; height: 0.25em; background: #ccc; } [type='range']::-webkit-slider-thumb { margin-top: -0.625em; box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #f90; } [type='range']::-moz-range-thumb { box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #f90; } [type='range']::-ms-thumb { margin-top: 0; box-sizing: border-box; border: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #f90; } 

 <div class='wrap'> <input type='range' value="5" min="0" max="10"/> </div> 

Credits goes to Ana Tudor for the Original code pen:

[Codepen](https://codepen.io/thebabydino/pen/WdeYMd)