在行动中看到它

玩这个演示

$('.single-slider').jRange({
    from: -2.0,
    to: 2.0,
    step: 0.5,
    scale: [-2.0,-1.0,0.0,1.0,2.0],
    format: '%s',
    width: 300,
    showLabels: true,
    snap: true
});

 

$('.range-slider').jRange({
    from: 0,
    to: 100,
    step: 1,
    scale: [0,25,50,75,100],
    format: '%s',
    width: 300,
    showLabels: true,
    isRange : true
});

 

 

如何使用

让我们看一些代码

要开始使用，您必须在html文件中包含jquery.range.js和jquery.range.css文件。

<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.range.js"></script>

稍后只需添加隐藏输入，您可以在此处显示此滑块。

<input type="hidden" class="slider-input" value="23" />

在此之后，您必须为该输入初始化此插件，如上例所示

选项

请参阅配置选项

通过将选项哈希传递给jRange方法，也可以以编程方式设置选项。

选项覆盖类型细节
from 强制性 整数 滑块的下限
to 强制性 整数 滑块的上限
step 可选的 整数 Default : 1

每一步的增量
scale 可选的 排列

包含标签的数组，显示在滑块下方。默认情况下它[从，到]。
showLabels 可选的 布尔

错误，如果您想要隐藏显示在滑块顶部的标签。

Default : true
showScale 可选的 布尔

如果您想隐藏滑块下方显示的比例，则为false。

Default : true
format 可选的 字符串/功能

这用于在指针上显示标签

Default : "%s"

String ：％s被其值替换，例如“％s days”，“％s goats”

Function：format（value，pointer） 
return：给定值和指针的字符串标签。
pointer如果isRange是真的可能是'低'/'高' ，否则未定义
width 可选的 整数 Default : 300
theme 可选的 串 Default : "theme-green"

这是添加到容器的css类名。可用的主题是“主题 - 蓝色”，“主题 - 绿色”。您还可以添加更多主题，就像在中一样jquery.range.less
isRange 可选的 布尔 Default : false

如果这是范围选择器，则为True。如果它的范围是隐藏输入的值将以逗号分隔，例如“25,75”
snap 可选的 布尔 Default : false

如果为True，则将滑块滑动为步进值
disable 可选的 布尔 Default : false

如果这是禁用（只读）范围选择器，则为True。您也可以稍后通过调用更改禁用状态。

$('.slider').jRange('disable'); $('.slider').jRange('enable'); $('.slider').jRange('toggleDisable');
onstatechange 可选的 功能

只要用户更改了值，就会调用此函数。同样的值也会自动为提供的隐藏输入设置。

对于单个滑块，值不带逗号，但是对于范围选择器值是逗号分隔的。
ondragend 可选的 功能

ondragend回调。如果你想每个滑块拖动只触发一次事件，这很有用。
onbarclicked 可选的 功能

用户点击栏时调用

修改

在运行时更改值

您可以调用以动态修改当前值和范围的方法。

方法  描述
setValue    

如果要更新范围，请设置滑块的当前值而不更改其范围updateRange。

$('.slider').jRange('setValue', '10,20');
$('.slider').jRange('setValue', '10');
updateRange    

'updateRange'改变（min，max）值和初始化后的间隔。

$('.slider').jRange('updateRange', '0,100');
$('.slider').jRange('updateRange', '0,100', '25,50');
$('.slider').jRange('updateRange', '0,100', 25);

传递第二个参数也会设置其当前值
从Github获取它