Framework7新版学习笔记之 滑动进度条

一：滑动进度条

滑动进度条是指：可以拖动来改变进度值的控件，例如：音量设置、亮度设置等。

二：定义滑动进度条

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];
});