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