Material 滑块在 Google Chrome 中不起作用

Question

Material 滑块在 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")

})

这里是link到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>

Material 滑块在 Google Chrome 中不起作用

Material slider not working in Google Chrome

html

javascript

jquery

google-chrome

cross-browser