滑块特效插件rangeSlider，带刻度，rangeSlider实现进度范围选择

先看效果，样式还是可以的

实现也很简单

@section Styles{
<link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.css" rel="stylesheet" />

根据自己的爱好选择样式
<link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinModern.css" rel="stylesheet" />
<link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinNice.css" rel="stylesheet" />
<link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinSimple.css" rel="stylesheet" />
<link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinHTML5.css" rel="stylesheet" />
<link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinFlat.css" rel="stylesheet" />

}

html部分：

js部分：

@section Scripts{

如果要实现动态修改，参数需要保存起来的而不是仅仅好看，这时在js部分添加一下脚本

// 要使用公共方法，首先必须将滑块实例保存到变量：
//将滑块实例保存到slider中
var slider = $("#costRange").data("ionRangeSlider");
n = 0
$("#btn").click(function () {
n++;
if (n>2) {
n = 0;
};
slider.update({
from: n,
});
})

效果：

设置

选项	数据的Attr	默认	类型	描述
`type`	`data-type`	`single`	串	选择滑块类型，可以是`single`- 对于一个手柄，或`double`对于两个手柄
`min`	`data-min`	`10`	数	设置滑块最小值
`max`	`data-max`	`100`	数	设置滑块最大值
`from`	`data-from`	`min`	数	设置左手柄的起始位置（或单手柄）
`to`	`data-to`	`max`	数	设置右手柄的起始位置
`step`	`data-step`	`1`	数	设置滑块步骤。总是> 0.可能是分数
`min_interval`	`data-min-interval`	`-`	数	设置滑块之间的最小间隔。仅适用于双人型
`max_interval`	`data-max-interval`	`-`	数	设置滑块之间的最小最大值。仅适用于双人型
`drag_interval`	`data-drag-interval`	`false`	布尔	允许用户拖动整个范围。仅适用于双人型
`values`	`data-values`	`[]`	排列	设置您自己的滑块值数组。它们可以是数字或字符串。如果设置了values数组，则不能再更改min，max和step param
`from_fixed`	`data-from-fixed`	`false`	布尔	固定左（或单）手柄的位置
`from_min`	`data-from-min`	`min`	数	设置左（或单）手柄的最小限制
`from_max`	`data-from-max`	`max`	数	设置左（或单）手柄的最大限制
`from_shadow`	`data-from-shadow`	`false`	布尔	突出显示左手柄的限制
`to_fixed`	`data-to-fixed`	`false`	布尔	固定右手柄的位置
`to_min`	`data-to-min`	`min`	数	设置右手柄的最小限制
`to_max`	`data-to-max`	`max`	数	设置右手柄的最大限制
`to_shadow`	`data-to-shadow`	`false`	布尔	突出显示正确的手柄
`prettify_enabled`	`data-prettify-enabled`	`true`	布尔	提高长数字的可读性：10000000→10 000 000
`prettify_separator`	`data-prettify-separator`		串	为长数字设置自己的分隔符：10000000→10,000,000等。
`prettify`	`-`	`null`	功能	设置自己的美化功能。可以是任何东西。例如，您可以将unix时间设置为滑块值，然后将它们转换为看起来很酷的日期
`force_edges`	`data-force-edges`	`false`	布尔	滑块手柄和工具提示将始终位于其容器内
`keyboard`	`data-keyboard`	`true`	布尔	激活键盘控件。向左移动：←，↓，A，S。向右移动：→，↑，W，D。
`grid`	`data-grid`	`true`	布尔	在滑块上方启用值网格
`grid_margin`	`data-grid-margin`	`true`	布尔	设置左右网格间隙
`grid_num`	`data-grid-num`	`4`	数	网格单元数
`grid_snap`	`data-grid-snap`	`false`	布尔	将网格捕捉到滑块步骤（步骤参数）。如果激活，则不使用grid_num。最大步数= 50
`hide_min_max`	`data-hide-min-max`	`false`	布尔	隐藏最小和最大标签
`hide_from_to`	`data-hide-from-to`	`false`	布尔	隐藏的和以标签
`prefix`	`data-prefix`	``	串	设置值的前缀。将在数字之前设置： $ 100
`postfix`	`data-postfix`	``	串	设置值的后缀。将在数字后立即设置：100 k
`max_postfix`	`data-max-postfix`	``	串	特殊后缀，仅用于最大值。将在手柄到达最大右侧位置后显示。例如0 - 100+
`decorate_both`	`data-decorate-both`	`true`	布尔	用于双重类型，仅在设置了前缀或后缀时使用。确定如何装饰接近的值。例如：$ 10k - $ 10万或$ 10 - 100k
`values_separator`	`data-decorate-both`	`-`	串	为关闭值设置您自己的分隔符。用于双重类型。默认值：10 - 100。或者您可以设置：10到100,10 + 100,10→100等。
`input_values_separator`	`data-input-values-separator`	`;`	串	输入值属性中的double值的分隔符。`<input value="25;42">`
`disable`	`data-disable`	`false`	布尔	锁定滑块并使其处于非活动状态。输入也被禁用。形式看不见
`block`	`data-blokc`	`false`	布尔	锁定滑块并使其处于非活动状态。输入未被禁用。可以发送表格
`extra_classes`	`data-extra-classes`	`—`	串	将额外的CSS类遍历到滑块容器
`scope`	`-`	`null`	目的	回调范围。传递任何物体
`onStart`	`-`	`null`	功能	回电话。在滑块启动时调用。获取所有滑块数据作为第一个属性
`onChange`	`-`	`null`	功能	回电话。IS调用每个值的变化。获取所有滑块数据作为第一个属性
`onFinish`	`-`	`null`	功能	回电话。在用户释放句柄时调用。获取所有滑块数据作为第一个属性
`onUpdate`	`-`	`null`	功能	回电话。当滑块由外部方法修改被称为`update`或`reset`

下载地址：https://github.com/IonDen/ion.rangeSlider#settings

里面还有很多domel

滑块特效插件rangeSlider，带刻度，rangeSlider实现进度范围选择

设置

猜你喜欢