材质滑动条无法在谷歌浏览器中使用
问题描述:
材质滑动条在谷歌浏览器中不起作用。它在Firefox和IE中运行良好。材质滑动条无法在谷歌浏览器中使用
HTML
<html>
<input class="mdl-slider mdl-js-slider" type="range" id="levelWithMaterial" min="1" max="10" value="1" />
</html>
在改变事件
$("#levelWithMaterial").on("change",function(){
alert("changed")
})
这里是链接到jsFiddle
答
您的活动更改为输入类型的事件:
$("#levelWithMaterial").on("input change",function(){
$(".level-value-with").text($(this).val());
});
答
您可以使用 “oninput” 属性这样的滑动部件上:
window.materialSlide = function(value) {
$(".level-value-with").text(value);
}
$("#levelWithoutMaterial").on("change",function() {
$(".level-value-without").text($(this).val());
});
.level-value-without,.level-value-with{font-weight:bold;color:blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<div class="menu-card-settings">
\t \t \t \t <h5 class="">
\t \t \t \t \t Level Depth with Material Class
\t \t \t \t </h5>
\t \t \t \t <p>
\t \t \t \t \t <input oninput="materialSlide(this.value)" class="mdl-slider mdl-js-slider cursor-pointer" type="range" id="levelWithMaterial" min="1" max="10" value="1" />
\t \t \t \t </p>
\t \t \t \t <span class="level-value-with">1</span>
<h5 class="roboto-font-family text">
\t \t \t \t \t Level Depth without Material Class
\t \t \t \t </h5>
\t \t \t \t <p>
\t \t \t \t \t <input class=" cursor-pointer" type="range" id="levelWithoutMaterial" min="1" max="10" value="1" />
\t \t \t \t </p>
\t \t \t \t <span class="level-value-without">1</span>
</div>
其Chrome浏览器工作正常了,但没有在IE – Jerry
然后用这两个事件 – madalinivascu
看https://jsfiddle.net/46fgae11/2/ – madalinivascu