一：滑動進度條

滑動進度條是指：可以拖動來改變進度值的控件，例如：音量設置、亮度設置等。

二：定義滑動進度條

1:單邊滑塊進度條

滑塊從0～max進行滑動，滑塊所處位置就是進度值。

<div class="range-slider range-slider-init" id="進度條id">
       <input type="range" min="0" max="100" step="1" value="初始值">
</div>

2:雙邊滑塊進度條（一般用於獲得範圍值）

進度條有兩個滑塊，進度值由 右邊 減去 左邊 得到。

 <div
          id="進度條id"
          class="range-slider range-slider-init color-green"
          data-label="true"
          data-dual="true"
          data-min="最小值"
          data-max="最大值"
          data-step="1"
          data-value-left="左邊滑塊初始值"
          data-value-right="右邊滑塊初始值">
</
 
div>

三：在js中監聽滑塊變化事件，獲取滑塊值

1:單邊滑塊值

var slider = app.range.get(‘#進度條‘);

var range_value = slider.value；//獲取進度值

2:雙邊滑塊範圍值

$$(‘#進度條‘).on(‘range:change‘, function (e, range) {
  var range_value = range.value[0] - range.value[1];
});

Framework7新版學習筆記之 滑動進度條