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

【问题标题】：Material slider not working in Google Chrome材质滑块在 Google Chrome 中不起作用
【发布时间】：2017-07-01 02:59:11
【问题描述】：

材料滑块在谷歌浏览器中不起作用。它在 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的链接

【问题讨论】：

标签： javascript jquery html google-chrome cross-browser

【解决方案1】：

您可以像这样在滑块元素上使用“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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

然后使用这两个事件
添加输入事件后，它会多次触发该事件。我怎样才能防止这种情况？我希望用滑块的最后一个值触发我的事件
@Jerry 你不能那样做，当你改变滑块时会触发事件
我希望该事件的工作方式与它在其他浏览器中的更改工作方式相同。就像鼠标向上一样，我想触发事件。
您可以在鼠标向上触发事件并删除更改/输入事件