javascript - IE 和 Edge 中的范围 slider 拇指 css 问题

Question

我正在为我的网站创建一个范围 slider ，它需要在所有浏览器上看起来都一样。我现在在 IE 和 Edge 中遇到 slider 拇指大小的问题。我无法将拇指的高度增加到超过 slider 轨道

Chrome 和 Firefox:

IE 和边缘:

代码:

<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*/
}

J查询:

$('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)'
                + ')'
                );
});

通过链接后http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html发现IE不会让拇指溢出轨道。但是其中提到了一种解决方法。我可以在调整 input[type="range"] 高度后进行更改。但这改变了 chrome 和 firefox 中的格式。

有什么办法解决吗

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

Answer 1

下面的代码显示了一个跨浏览器的 slider ，它也适用于 Edge:

.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>

原始代码笔归功于 Ana Tudor:

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