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/

Hamed · Answer 1 · 2018-07-06T21:03:22.080

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)

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) — Paul Roub, Jul 06 '18 at 20:41
I edited the post to keep both the code and link to the Original one as I am referring to someone else's work. — Hamed, Jul 06 '18 at 21:05

range slider thumb css issue in IE and Edge

1 Answers1