材质滑块在Google Chrome中不起作用

Question

材质滑块在Google Chrome中不起作用。 它在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的链接

Answer 1

将事件更改为输入类型事件：

$("#levelWithMaterial").on("input change",function(){
$(".level-value-with").text($(this).val());
});

https://jsfiddle.net/46fgae11/1/

Answer 2

您可以在滑块元素上使用“ 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"> <h5 class=""> Level Depth with Material Class </h5> <p> <input oninput="materialSlide(this.value)" class="mdl-slider mdl-js-slider cursor-pointer" type="range" id="levelWithMaterial" min="1" max="10" value="1" /> </p> <span class="level-value-with">1</span> <h5 class="roboto-font-family text"> Level Depth without Material Class </h5> <p> <input class=" cursor-pointer" type="range" id="levelWithoutMaterial" min="1" max="10" value="1" /> </p> <span class="level-value-without">1</span> </div>