jQuery滑动选取数值范围

分手后的思念是犯贱 2022-08-10 06:19 211阅读 0赞

使用jRange插件实现滑动选取数值范围，相关网址：[https://github.com/nitinhayaran/jRange/][https_github.com_nitinhayaran_jRange]

# 基本使用    #

1.引用文件：jquery.min.js jquery.range.js jquery.range.css

2.在html中需要展示滑块的位置放入`隐藏的input标签，`在value中设置默认值。

3.选中隐藏的标签调用jRange()方法并设置初始化值，如

$('.range-slider').jRange({
     		from: 0, // 开始于
    			to: 100, // 结束于
    			step: 1, // 一次滑动多少
    			scale: [0,25,50,75,100],  // 分割点
    			format: '%s',  // 格式化格式
    			width: 300, // 宽度
    			showLabels: true, // 是否显示滑动条下方的尺寸标签
    			showScale: true,  // 是否显示滑块上方的数值标签
    			isRange:true  // 是否选取范围
    		});

来调用jRange插件。

这是基本的用法，效果如下图

ie10、ie11效果图：

![Center][]

ie9效果图：

![Center 1][]

ie8效果图：

![Center 2][]

ie6效果图：

![Center 3][]

隐藏的jRange插件会自动将滑块选择的值传入input标签，我们获取input的值就可以了，基本操作在此就不赘述。

# 样式    #

插件提供的有2个样式：theme-blue和theme-green，默认的是theme-green，可以通过theme: 'theme-green'来设置。我们也可以自定义样式。我们对theme-green的主题做出如下

.slider-container .back-bar .pointer-label {  /*设置上标尺的字体大小，背景色，位置*/
      position: absolute;
      top:-17px;
      font-size: 12px; 
      background: #ffffff; 
      white-space: nowrap;
      line-height: 1;
    }

.slider-container .scale ins { /*设置下标尺的字体大小，背景色，位置*/
      font-size: 12px; 
      text-decoration: none;
      position: absolute;
      left: 0;
      top: 5px;
      color: #999;
      line-height: 1;
    }

.theme-green .back-bar { /*滚动条设置*/
      height: 1px; /*滚动条的高度*/
      border-radius: 2px;
      background-color: #eeeeee;
      background-color: #e7e7e7;
      background-color: #0080ff;
      background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
      background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
      background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
      background-image: linear-gradient(to bottom, #0080ff, #0080ff); /*滚动条未被选中部分的颜色*/
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    }

.theme-green .back-bar .selected-bar { /*被选中的滚动条*/
      border-radius: 2px;
      background-color: #a1fad0;
      background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
      background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
      background-image: -o-linear-gradient(top, #bdfade, #76fabc);
      background-image: linear-gradient(to bottom, #ff0080, #ff0080); /*设置被选中部分的滚动条的颜色*/
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
    }

.theme-green .back-bar .pointer { /*滑块设置*/
      width: 5px;
      height: 5px;
      top: -2px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 10px;
      border: 1px solid #0000a0; 
      background-color: #e7e7e7;
      background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
      background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
      background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
      background-image: linear-gradient(to bottom, #0000a0, #8000ff); /*渐变色*/
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    }

.theme-green .back-bar .pointer-label { /*上标尺颜色*/
      color: #0080ff;
    }

.theme-green .scale span { /*滑条下方刻度样式设置*/
      border-left: 	1px solid #e5e5e5;
    }

.theme-green .scale ins { /*下标尺颜色*/
      color: #0080ff;
    }

修改之后的效果图：

![Center 4][]

# option    #

format的默认值为%s,jRange框架会将format值的%s部分用滑块的数值替代，剩余部分不变如format:%smin,将会显示onstatechange: function() \{\},![Center 5][]

onstatechange: function() \{\}当滑块的值被用户改变是执行，被改变的值依然会赋值给隐藏的标签。

[https_github.com_nitinhayaran_jRange]: https://github.com/nitinhayaran/jRange/
[Center]: /images/20220731/587241e3730c4080bb2a5f0d022a5686.png
[Center 1]: /images/20220731/335263fa34f04824b8d5333076177e2e.png
[Center 2]: /images/20220731/17563c0d0a1940debff0766462a9d8d9.png
[Center 3]: /images/20220731/e8ffd3a06bc749f5b99915fa9da2c85f.png
[Center 4]: /images/20220731/aaceed68d31b48a488665c476acdc3a3.png
[Center 5]: /images/20220731/692792995e0548dcbe3fe78c4151433f.png