html/weui slider

我们在开发公众号的时候难免会遇到使用slider情况，如音量控制，歌曲进度等。

这里可参考：http://www.vxzsk.com/772.html

这个是weui给的例子

在实际使用的时候还是不行，可以稍作修改：

var $sliderTrack = $('#sliderTrack'),
    $sliderHandler = $('#sliderHandler'),
    $sliderValue = $('#sliderValue');

var totalLen = $('#sliderInner').width(),
    startLeft = 0,
    startX = 0;


$sliderHandler
    .on('touchstart', function(e) {
        console.log(e.originalEvent);
        totalLen = $('#sliderInner').width();
        startLeft = parseInt($sliderHandler.css('left'));
        startX = e.originalEvent.changedTouches[0].clientX;
    })
    .on('touchmove', function(e) {
        var dist = startLeft + e.originalEvent.changedTouches[0].clientX - startX,
            percent;
        dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
        percent = parseInt(dist / totalLen * 100);
        $sliderTrack.css('width', percent + '%');
        $sliderHandler.css('left', percent + '%');
        $sliderValue.text(percent + '%');

        e.preventDefault();
    });

只是改了些事件的参数

要新增点击事件的话：

$('#sliderInner').on('click', function(e) {
    totalLen = $('#sliderInner').width();
    var left = e.originalEvent.offsetX;
    var percent = parseInt(left / totalLen * 100);
    $sliderTrack.css('width', percent + '%');
    $sliderHandler.css('left', percent + '%');
});

附上使用的div：

<div class="weui-slider-box">
        <div class="weui-slider">
            <div id="sliderInner" class="weui-slider__inner">
                <div id="sliderTrack" style=" 50%;" class="weui-slider__track"></div>
                <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
            </div>
        </div>
        <div id="sliderValue" class="weui-slider-box__value">50</div>
</div>

引入的css：

<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">

引入的javascript:

<script src="https://weui.io/zepto.min.js"></script>