作为一个初级前端工作人员，我最近在做一个关于直播的项目，其中一个功能要求是设置延迟时间， 所以就用到了jquery.range.js这个插件。插件中设置$(".single-slider")的value值可以控制进度条的位置。可是我要根据一开始你传给后台的时间值来动态改变进度条的位置，这样插件就无法满足我的要求了。比如：当你在js代码中改变了$(".single-slider")的value值时，进度条的位置并不会跟着变化。所以花了几十分钟研究了一下源代码，发现只要简单的改变一下他的返回值就能达到要求了。同样还可以绑定其他一些事件。详细步骤如下：
1、如果你没有动过源代码的话，应该是332行，把 return result || this 改成 return result || this.data('plugin_' + pluginName);
其原理是把返回值变成jquery对象。
2、给$('.single-slider').jRange({})重新命名一下 即 test = $('.single-slider').jRange({}),当然别忘了在最开始var一下test；
3、在需要改变进度条的地方调用setValue方法，方法来源于如下图：
方法调用方式为（点击修改value值）：
ps:我当时用的是旧版本，目前版本直接调用$('.slider').jRange('setValue', '10')即可（从评论中才知）;
附demo代码：
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>drag</title>
<link rel="stylesheet" href="../css/jquery.range.css">
<script src="../js/jquery-3.1.0.min.js"></script>
<script src="../js/jquery.range.js"></script>
<head>
<style>
.highlighttext{
background-color:yellow;
font-weight:bold;
}
.demo{
display: inline-block;
}
#g1{
margin: 40px auto;
}
</style> </head>
<body>
<div class="dragTime_box">
<span>延时：</span>
<div class="demo">
<input type="hidden" class="single-slider" value="5" />
</div>
<span>分钟</span>
<button id="g1">获取值</button>
</div>
<input type="button" value="改变值" id="changeValue">
<script>
var test;
$(function () {
test = $('.single-slider').jRange({
from: 0,
to: 30,
step: 1,
scale: [0, 10, 20, 30],
format: '%s',
width: 224,
showLabels: true,
showScale: true
}); $("#g1").click(function () {
var aa = $(".single-slider").val();
alert(aa);
});
}); $('#changeValue').click(function(){
test.setValue(10);
});
</script>
</body>
</head>
</html>