R-slider 多功能滑块jQuery插件

PetitQ 表单/表格 2018-11-13 2.16K 0 0

r-slider.js 是一款 jQuery 多功能滑块插件。使用该插件，可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。

使用方法

在页面中引入 jquery 和 r-slider.js 文件。

也想出现在这里？联系我们吧

<script src="js/jquery.min.js"></script>

```
<script src="js/r-slider.js"></script>
```

HTML 部分

使用一个 div 作为滑块的容器。

```
<div id="container"></div>
```

CSS 样式

为滑块添加下面的 CSS 样式。

```
#container .r-slider-line {
```
```
  background: #4b5459;
```
```
  border-radius: 4px;
```
```
}
```
```
 
```
```
#container .r-slider-fill {
```
```
  background: #4b5459;
```
```
}
```
```
 
```
```
#container .r-slider-button {
```
```
  box-shadow: inset 0 0 0 4px #c4c8cc;
```
```
  border-radius: 100%;
```
```
  text-align: center;
```
```
}
```
```
 
```
```
#container .r-slider-label {
```
```
  position: relative;
```
```
  top: 13px;
```
```
  font-size: 20px;
```
```
  color: #c4c8cc;
```
```
  z-index: 1000;
```
```
}
```
```
 
```
```
#container .r-slider-label:before {
```
```
  content: "";
```
```
  position: absolute;
```
```
  top: -13px;
```
```
  left: 5px;
```
```
  width: 30px;
```
```
  height: 30px;
```
```
  background: #4b5459;
```
```
  border-radius: 100%;
```
```
  z-index: -1;
```
```
}
```

初始化插件

在页面 DOM 元素加载完毕之后，通过下面的方法来初始化该滑块插件。

```
var mySlider = new slider({
```
```
 
```
```
    // container element
```
```
    container: "#container",
```
```
 
```
```
    // start/end values
```
```
    start: -100,
```
```
    end: 100,
```
```
 
```
```
    // custom step
```
```
    step: 1,
```
```
 
```
```
    // initial value
```
```
    value: 0
```
```
 
```
```
});
```

配置参数

该滑块插件的可用配置参数有：

```
var mySlider = new slider({
```
```
 
```
```
    // container element
```
```
    container: "#container",
```
```
 
```
```
    // start/end values
```
```
    start: -100,
```
```
    end: 100,
```
```
 
```
```
    // min/max values
```
```
    min: -50,
```
```
    max: 80,
```
```
 
```
```
    // custom step
```
```
    step: 1,
```
```
 
```
```
    // initial value
```
```
    value: 0,
```
```
 
```
```
    // shows value on drag
```
```
    showValue: true,
```
```
 
```
```
    // always shows value
```
```
    fixValue: true,
```
```
 
```
```
    // shows labels
```
```
    pinStep: 10,
```
```
 
```
```
    // custom label step
```
```
    labelStep: 40,
```
```
 
```
```
    // disables drag
```
```
    changable: false,
```
```
 
```
```
    // custom styles
```
```
    style: { 
```
```
      line_width: 0 
```
```
    },
```
```
 
```
```
    // for toggle switch
```
```
    text: ["ON", "OFF"],
```
```
 
```
```
    // callback
```
```
    ondrag: function(){}
```
```
 
```
```
});
```

Github 地址：https://github.com/mohammadFeiz/r-slider

R-slider 多功能滑块 jQuery 插件

已有 540 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

也想出现在这里？联系我们吧

Bootstrap4表单浮动标签插件

Skroll 页面滚动动画特效jQuery插件

softkey - 跨浏览器jQuery虚拟键盘插件

表单/表格 6 年前 2.48K
Material Design 风格用户注册登录界面设计

表单/表格 6 年前 1.82K
jQuery和CSS3实用响应式商品参数比较表格

表单/表格 6 年前 1.74K

发表回复取消回复

要发表评论，您必须先登录。

流年似水

今日已经过去0小时

这周已经过去0天

本月已经过去0天

今年已经过去0个月

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

原版主题 6 年前 5.66K

Mac - 全屏摄影艺术相册展示模板WordPress主题，该主题适合那些从事摄影，绘画或数字图形艺术家…

VideoPro - 专业视频网站电影网站WordPress主题

原版主题 8 年前 1.41W

VideoPro是最强大的视频网站WordPress主题。基于市场上最大的视频True Mag主题，Vi…

DUX-PRO创客云开发版WordPerss中文主题

原版主题 10 年前 2.85W

DUX-PRO创客科技美化专业版WordPerss主题企业博客模板，此模板为创客独家二次开发，HTML5…

Elessi - AJAX电商网站模板WordPress主题

原版主题 5 年前 4.10K

可以使用Option Framework轻松定制Elessi，它具有通过SMOF强大的主题选项面板。该主…

Bronx - 时尚服饰购物商城网站WordPress主题

原版主题, 汉化主题 8 年前 7.51K

Bronx WordPress深度汉化版是一款独特的Wordpress电商主题。自适应，Retina 支…

点击签到领取积分可下载全站资源！

今日签到

连续签到

z1988

2小时前

71
Joyce

7小时前

58
Canice

16小时前

266
onlisai

17小时前

65
shboxy

17小时前

540

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

R-slider 多功能滑块jQuery插件

使用方法

HTML 部分

CSS 样式

初始化插件

配置参数

R-slider 多功能滑块 jQuery 插件

相关文章

softkey - 跨浏览器jQuery虚拟键盘插件

Material Design 风格用户注册登录界面设计

jQuery和CSS3实用响应式商品参数比较表格

发表回复取消回复

热销模板

表单/表格

使用方法

HTML 部分

CSS 样式

初始化插件

配置参数

R-slider 多功能滑块 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复