jQuery实现的数值范围range2dslider选取插件特效多款代码分享

本文实例讲述了jQuery实现的数值范围range2dslider选取插件特效。分享给大家供大家参考。具体如下：
这是是一款简单的jquery插件，使用该插件后实现鼠标可以滑动(拖动)控制数值范围选取的特效代码。
运行效果图：                             -------------------查看效果 下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery实现的数值范围选取特效代码如下

 body,html{
 margin:0px;
 padding:0px;
 }
 ul{
 margin:0px 0px;
 padding:10px 25px;
 }
 body>div{
 margin:0px 20px;
 padding:20px;
 background:rgba(184, 184, 184, 0.1);
 }




简单的二维滑块


水平滑块


垂直滑块








平滑滑块(x)


自定义风格滑块


 .xdsoft_custom .xdsoft_range2dslider_runner{
 border-radius:1px;
 margin:0px 0px -4px -8px !important;
 background:rgba(0,0,127,0.5);
 border:1px outset #ddd;
 }
 .xdsoft_custom .xdsoft_range2dslider_box{
 min-height:8px;
 background:rgba(127,127,127,0.5);
 border-radius:1px;
 border-style:solid;
 }
 .xdsoft_custom .xdsoft_slider_label{
 background: red;
 color: #fff;
 bottom: 22px !important;
 }
 .xdsoft_custom .xdsoft_slider_label.xdsoft_slider_label_top:after{
 border-top-color:red;
 }





适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

以上就是为大家分享的jQuery实现的数值范围选取特效代码，希望大家可以喜欢。