jqueryslider

功能描述

jQuery自定义滑块插件

快速使用

滑块的值会绑定到 data-sliderValue
自带jQuery版本为：3.3.1
纯中文注释，没有压缩文件，如需用到线上。请将文件压缩，去除注释！！！    
需要调用3个文件，slider.css，jquery.js，slider.js
<link rel="stylesheet" href="./css/slider.css">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="./js/slider.js"></script>

html
<div class="slider-range-package slider1"></div>

<div class="slider-range-package slider2"></div>

<div class="slider-range-package slider3"></div>

js
// 默认
$('.slider1').slider();

// 最大最小值改变
$('.slider2').slider({
    minValue: 0,
    maxValue: 180
});

// 设置初始值
$('.slider3').slider({
    minValue: 0,
    maxValue: 100,
    initValue: 60
});

 slider: function (config) {
    var conf = {
        // 是否活动
        active: false,
        // 按下的值
        mousedownEvent: {},
        // 滑块包裹层
        sliderRange: null,
        // 滑块按钮
        slider: null,
        // 滑块活动线
        sliderActive: null,
        // 滑块值显示
        sliderValue: null,
        // 滑块包裹层总宽
        sliderRangeWidth: 0,
        // 滑块按钮的一半宽度
        sliderHalfWidth: 0,
        // 最小值
        minValue: 0,
        // 最大值
        maxValue: 100,
        // 最大与最小的差
        diffValue: 0,
        // 初始值
        initValue: 0
    };
    conf = $.extend(conf,config);
}

特别说明