jQuery中rangeslider滑块回调函数未触发问题咨询

嘿，问题很明显——你没有引入rangeslider插件本身的核心文件！你现在只加载了jQuery，但rangeslider是基于jQuery的第三方插件，必须单独引入它的JS脚本和CSS样式才能正常工作。

你参考的官网示例里默认已经包含了这些资源，但你的代码里完全没加，导致jQuery根本不认识rangeslider()这个方法，调用后自然没有任何反应，回调函数当然也不会触发。

解决步骤： #

1. 在<head>里添加rangeslider的CSS样式文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />

2. 在jQuery之后、你调用rangeslider()的代码之前，添加rangeslider的JS脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>

修正后的完整代码示例： #

<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- 新增rangeslider CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
<!-- 新增rangeslider JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input type="range" min="10" max="1000" step="10" value="300" />
<script>
$(function () {
console.log('====')
$('input[type="range"]').rangeslider({
polyfill: true,
onInit: function () {
console.log('init')
},
onSlide: function (position, value) {
},
onSlideEnd: function (position, value) {
console.log(value)
}
});
})
</script>
</body>
</html>

这样修改后，你再测试就能看到init日志输出，滑动滑块结束时也能打印出对应的值了。

内容的提问来源于stack exchange，提问作者user5711656