js 中滑块（Ionrangeslider.js的使用）

你想要的应有尽有：

 

 

1、首页引入相关文件 ：

（1）、csdn

  <!--Plugin CSS file with desired skin-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>
    
    <!--jQuery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!--Plugin JavaScript file-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
    

（2）、bower

 bower install ion-rangeslider

（3）、npm

npm install ion-rangeslider

2、项目中的使用：

 <input type="text" class="js-range-slider" name="my_range" value="" />

 $(".js-range-slider").ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        step:1, //步长，也可以设置为小数
        onStart: function (data) {//回调 
            // fired then range slider is ready
        },
        onChange: function (data) {
            // fired on every range slider update
        },
        onFinish: function (data) { //拖动结束回调
           console.log('起始值：'+data.from)
           console.log('终止值：'+data.from)
        },
        onUpdate: function (data) {
            // fired on changing slider with Update method
        }

    });

 动态设置滑块范围值：

 <input type="text" id="demo_5" name="my_range" value="" />

var custom_values = [0, 10, 100, 1000, 10000, 100000, 1000000];
    
    // be careful! FROM and TO should be index of values array
    var my_from = custom_values.indexOf(10);
    var my_to = custom_values.indexOf(10000);
    
    $("#demo_5").ionRangeSlider({
        type: "double",
        grid: true,
        from: my_from,
        to: my_to,
        values: custom_values
    });

 

3、意欲了解更多，请挪步：http://ionden.com/a/plugins/ion.rangeSlider/skins.html