您好,我很高兴在 Edge 中正确显示范围 slider slider 。 slider 拇指似乎在轨道内部,而不是外部。
这是我的意思的截图:
这是我正在使用的代码
function addListenerMulti(element, eventNames, listener) {
var events = eventNames.split(' ');
for (var i=0, iLen=events.length; i<iLen; i++) {
element.addEventListener(events[i], listener, false);
}
}
var slider = document.getElementById("myRange1");
addListenerMulti(slider, 'mouseup touchend', function(event){
var x = event.target.value
console.log(x)
if (x <= 5) {
slider.className = '';
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
}
});
var slider2 = document.getElementById("myRange2");
addListenerMulti(slider2, 'mouseup touchend', function(event){
var x = event.target.value
console.log(x)
if (x <= 5) {
slider2.className = '';
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
}
});
var slider3 = document.getElementById("myRange3");
addListenerMulti(slider3, 'mouseup touchend', function(event){
var x = event.target.value
console.log(x)
if (x <= 5) {
slider3.className = '';
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
}
});
input[type=range] {
-webkit-appearance: none;
height: 20px;
width: 200px;
max-width: 100%;
margin: 25px auto;
background: #08121c;
border: 3px solid #08121c;
border-radius: 100px;
display: block;
}
input[type=range]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
width: 35px;
border-radius: 100%;
background-color: transparent;
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
}
input[type="range"].MyClass-1::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/10-smiling-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-2::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/37-relieved-face-2.svg);
}
input[type="range"].MyClass-3::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-4::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/19-star-struck-1.svg);
}
input[type="range"].MyClass-5::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}
<input name="entry.878505724" type="range" id="myRange1" min="1" max="5" value="3" step="1" />
<input name="entry.165236575" type="range" id="myRange2" min="1" max="5" value="3" />
<input name="entry.425406382" type="range" id="myRange3" min="1" max="5" value="3" step="1" />
我检查过代码似乎可以在 Chrome 和 Firefox 中运行。帮助将不胜感激。
最佳答案
您的 ::-webkit-
样式针对 Webkit 浏览器,但不是 Edge。 slider 缩略图的边缘属性是 -ms-thumb
。您可以在 https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-thumb 查看规范和其他与边缘相关的 CSS 属性链接在该页面的底部。
让自定义 slider 跨浏览器工作变得很棘手。一篇好的文章是 https://css-tricks.com/sliding-nightmare-understanding-range-input/
伪造它可能更可靠:隐藏输入,构建一个自定义界面,让用户在轨道上移动拇指,并使用 JS 更新输入 html 以匹配用户看到的内容。
关于javascript - slider 拇指无法在 Microsoft Edge 中正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57935824/