Ionrangeslider.js文档API

最新推荐文章于 2024-05-10 09:50:20 发布

樊小书生

最新推荐文章于 2024-05-10 09:50:20 发布

阅读量4.8k

点赞数

分类专栏： jQuery JavaScript 文章标签： api 文档 Ion Range Slider

本文链接：https://blog.csdn.net/fxss5201/article/details/54613547

版权

JavaScript 同时被 2 个专栏收录

86 篇文章 1 订阅

订阅专栏

jQuery

21 篇文章 0 订阅

订阅专栏

官方文档

Option	Defaults	Type	Description
type data-type	“single”	string	Choose slider type, could be single - for one handle, or double for two handles
min data-min	10	number	Set slider minimum value
max data-max	100	number	Set slider maximum value
from data-from	min	number	Set start position for left handle (or for single handle)
to data-to	max	number	Set start position for right handle
step data-step	1	number	Set sliders step. Always > 0. Could be fractional.
min_interval data-min-interval	—	number	Set minimum diapason between sliders. Only in “double” type
max_interval data-max-interval	—	number	Set maximum diapason between sliders. Only in “double” type
drag_interval data-drag-interval	false	boolean	Allow user to drag whole range. Only in “double” type (beta)
values data-values	[]	array	Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, can no longer be changed.
from_fixed data-from-fixed	false	boolean	Fix position of left (or single) handle.
from_min data-from-min	min	number	Set minimum limit for left handle.
from_max data-from-max	max	number	Set the maximum limit for left handle
from_shadow data-from-shadow	false	boolean	Highlight the limits for left handle
to_fixed data-to-fixed	false	boolean	Fix position of right handle.
to_min data-to-min	min	number	Set the minimum limit for right handle
to_max data-to-max	max	number	Set the maximum limit for right handle
to_shadow data-to-shadow	false	boolean	Highlight the limits for right handle
prettify_enabled data-prettify-enabled	true	boolean	Improve readability of long numbers. 10000000 → 10 000 000
prettify_separator data-prettify-separator	” “	string	Set up your own separator for long numbers. 10 000, 10.000, 10-000, etc.
prettify —	null	function	Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates.
force_edges data-force-edges	false	boolean	Slider will be always inside it’s container.
keyboard data-keyboard	false	boolean	Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
keyboard_step data-keyboard-step	5	number	Movement step, than controling from keyboard. In percents.
grid data-grid	false	boolean	Enables grid of values.
grid_margin data-grid-margin	true	boolean	Set left and right grid borders.
grid_num data-grid-num	4	number	Number of grid units.
grid_snap data-grid-snap	false	boolean	Snap grid to sliders step (step param). If activated, grid_num will not be used.
hide_min_max data-hide-min-max	false	boolean	Hides min and max labels
hide_from_to data-hide-from-to	false	boolean	Hide from and to lables
prefix data-prefix	—	string	Set prefix for values. Will be set up right before the number: $100
postfix data-postfix	—	string	Set postfix for values. Will be set up right after the number: 100k
max_postfix data-max-postfix	—	string	Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+
decorate_both data-decorate-both	true	boolean	Used for “double” type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k —$ 100k or $10 — 100k
values_separator data-values-separator	” — “	string	Set your own separator for close values. Used for “double” type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.
input_values_separator data-input-values-separator	” ; “	string	Separator for double values in input value property.
disable data-disable	false	boolean	Locks slider and makes it inactive.
onStart —	null	function	Callback. Is called on slider start.
onChange —	null	function	Callback. IS called on each values change.
onFinish —	null	function	Callback. Is called than user releases handle.
onUpdate —	null	function	Callback. Is called than slider is modified by external methods update or reset.

例子

以下是一个小例子，单个的、双向的、禁止移动的，其他的可参考官网上例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/ion.rangeSlider.css">
    <link rel="stylesheet" type="text/css" href="css/ion.rangeSlider.skinFlat.css">
    <script type="text/javascript" src="js/ion.rangeSlider.js"></script>
</head>
<body>
<div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
<div style="width: 500px;height: 100px;margin: 0 auto"><input id="rangeSingle" type="" name=""></div>
<div style="width: 500px;height: 100px;margin: 0 auto"><input id="rangeDouble" type="" name=""></div>
<div style="width: 500px;height: 100px;margin: 0 auto"><input id="rangeSingleNoSlider" type="" name=""></div>
<div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
<script type="text/javascript">
$("#rangeSingle").ionRangeSlider({
    min: 0,
    max: 10000,
    from: 1000,
    to: 9000,
    type: 'single',
    prefix: "$",
    grid: true,
    grid_num: 5
});
$("#rangeDouble").ionRangeSlider({
    min: 0,
    max: 10000,
    from: 1000,
    to: 9000,
    type: 'double',
    postfix: "万",
    grid: true,
    grid_num: 10
});
$("#rangeSingleNoSlider").ionRangeSlider({
    min: 0,
    max: 10000,
    from: 3000,
    from_fixed: true,//可设置禁止移动
    type: 'single',
    postfix: "米",
    prettify: true,
    grid: true,
    grid_num: 10
});

</script>
</body>
</html>

基本例子可参考：http://ionden.com/a/plugins/ion.rangeSlider/demo.html
先进的演示可参考：http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
互动演示可参考：
http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html

下载Ionrangeslider文件

Ionrangeslider文件可以从此处下载：http://download.csdn.net/detail/fxss5201/9741066

樊小书生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ionrangeslider.js文档API

Ionrangeslider.js是一个不错的，舒适，易于定制的范围滑块，支持自定义皮肤。还支持事件和公共方法，具有灵活的设置，完全可以用CSS改变。它支持触摸的设备，兼容性支持 iPhone, iPad, Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)。
复制链接

扫一扫

专栏目录