input range三浏览器的兼容
效果如图所示：
image.png
参考文章 https://juejin.im/entry/59a67890f265da2494123881
我的环境下编译时补全前缀，使用的无前缀写法 ‘appearance：none‘等使用了无前缀写法，若编译器不自带该功能，需补全前缀，如-webkit-appearance:none等等。
- jsx
<input ref="range" className="crop-range" defaultValue="0" min="0" max="50" type="range" onChange={this.changeZoom}/>
- scss
/* input range */
.crop-range {
display: inline-block;
margin: 0;
padding: 0;
width: 160px;
background-color: #f0f0f0;
cursor: pointer;
appearance: none;
border-radius: 10px;
outline: none;
/* 公用滑条样式 */
@mixin track-style {
height: 6px;
border-radius: 3px;
appearance: none; //去除自带的滑条样式
}
/* 公用滑块样式 */
@mixin thumb-style {
box-shadow: 0 .125em .125em #666666;
width: 18px;
height: 18px;
background-color: #fff;
border: 4px solid #a100ff;
border-radius: 50%;
box-sizing: border-box;
appearance: none; //去除自带的滑块样式
}
&::-ms-track { //ie滑条
@include track-style;
border-color: transparent; //去除原有边框
color: transparent; //去除轨道内的竖线
padding: 10px 0;
background-color: #fff;
}
&::-webkit-slider-runnable-track { //chrome滑条
@include track-style;
}
&::moz-range-track {//firefox滑条
@include track-style;
outline: none;
background-color: #fff;
}
&::-ms-fill-lower {//ie滑条已填充部分
border-radius: 10px;
background: #a100ff;
}
&::-ms-fill-upper {//ie滑条未填充部分
border-radius: 10px;
background: #f0f0f0;
}
&::-moz-range-progress {//firefox滑条渐变
outline: none;
height: 6px;
background: linear-gradient(to right, #a100ff, #a100ff 100%, #f0f0f0);
border-radius: 3px;
}
&::-ms-thumb {//ie滑块
@include thumb-style;
margin-top: -3px;
border-radius: 50%;
}
&::-moz-range-thumb {//firefox滑块
@include thumb-style;
margin-top: -7px;
}
&::-webkit-slider-thumb {//chrome滑块
@include thumb-style;
margin-top: -7px;
}
&::-moz-focus-outer { //firefox去input range 的outline
border: 0;
}
}
- jsx
componentDidMount(){
/* forefox的input的默认高度是子元素max-height（滑块的高度），input的background-color已经设置成灰色，所以在这里控制高度 */
/* 麻瓜写法 */
if((navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/))) {
document.getElementsByClassName('crop-range')[0].style.height = '6px';
}
this.loadResource(()=>{this.init()});
}
/* Chrome没有提供滑块前后两种颜色的css属性，需js来控制 */
if (navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/)) {
$range.style.background = 'linear-gradient(to right, #a100ff, #a100ff ' + percent + '%, #f0f0f0 ' + percent + '%)';
}
