材質滑動條在谷歌瀏覽器中不起作用。它在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