IE和Edge中的范围滑块拇指css问题

Posted 2023-02-18

【中文标题】IE和Edge中的范围滑块拇指css问题

【英文标题】：range slider thumb css issue in IE and Edge

【发布时间】：2018-08-12 21:40:31

【问题描述】：

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

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

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

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

有没有办法解决。

小提琴： https://jsfiddle.net/anoopcr/ssbx0anj/55/

【问题讨论】：

你找到解决办法了吗？

【参考方案1】：

下面的代码显示了一个也可以在 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)

【讨论】：

欢迎提供解决方案的链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.

我编辑了帖子以保留原始代码和链接，因为我指的是其他人的工作。