jquery.range.js左右滑动选取数值插件，动态改变进度。
作为一个初级前端工作人员，我最近在做一个关于直播的项目，其中一个功能要求是设置延迟时间， 所以就用到了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>
