[英]range slider thumb css issue in IE and Edge
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.
我现在在IE和Edge中有滑块拇指大小的问题。 I am unable to increase the height of thumb more than the slider track
我无法比滑块轨道增加拇指的高度
Chrome and Firefox: Chrome和Firefox:
IE and Edge: IE和Edge:
Code: 码:
<input type="range" min="1" max="100" step="1" value="15">
CSS: 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: 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. 通过链接http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html发现IE不会让拇指溢出轨道。 But there is a workaround mentioned in it.
但是有一个解决方法在其中提到。 I am able to make that change after adjusting the
input[type="range"]
height. 调整
input[type="range"]
高度后,我可以进行更改。 But that changing the format in chrome and firefox. 但是那改变了chrome和firefox的格式。
Is there anyway to to resolve it. 无论如何要解决它。
Fiddle: https://jsfiddle.net/anoopcr/ssbx0anj/55/ 小提琴: https : //jsfiddle.net/anoopcr/ssbx0anj/55/
The code below shows a cross-browser slider that is working on Edge as well: 下面的代码显示了一个正在使用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>
Credits goes to Ana Tudor for the Original code pen: 致原始代码笔的Ana Tudor的积分:
[Codepen](https://codepen.io/thebabydino/pen/WdeYMd)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.