作為一個初級前端工作人員，我最近在做一個關於直播的項目，其中一個功能要求是設置延遲時間， 所以就用到了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>