ion-rangeslider
Advanced tools
Readme
Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.
Add the following libraries to the page:
Add the following stylesheets to the page:
Use CDNjs or JSdelivr to get latest version of plugin and jQuery.
<!--Plugin CSS file with desired skin-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
Use NPM to download latest version of a plugin and install it directly in to your project.
Use Bower to download latest version of a plugin and install it directly in to your project.
Use Yarn to download latest version of a plugin and install it directly in to your project.
The slider overrides a native text input element.
<input type="text" id="example_id" name="example_name" value="" />
To initialise the slider, call ionRangeSlider on the element:
$("#example_id").ionRangeSlider();
Here you can find bunch of advanced JSFIDDLE demos with different, non-standard use cases:
| Option | Data-Attr | Defaults | Type | Description |
|---|---|---|---|---|
skin | data-skin | flat | string | Choose UI skin to use (flat, big, modern, round, sharp, square) |
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 for double type |
max_interval | data-max-interval | - | number | Set minimum maximum between sliders. Only for double type |
drag_interval | data-drag-interval | false | boolean | Allow user to drag whole range. Only for double type |
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 (or single) handle |
from_max | data-from-max | max | number | Set maximum limit for left (or single) 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 minimum limit for right handle |
to_max | data-to-max | max | number | Set maximum limit for right handle |
to_shadow | data-to-shadow | false | boolean | Highlight the 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: 10000000 → 10,000,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 | Sliders handles and tooltips will be always inside it's container |
keyboard | data-keyboard | true | boolean | Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D. |
grid | data-grid | true | boolean | Enables grid of values above the slider |
grid_margin | data-grid-margin | true | boolean | Set left and right grid gaps |
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. Max steps = 50 |
hide_min_max | data-hide-min-max | false | boolean | Hides min and max labels |
hide_from_to | data-hide-from-to | false | boolean | Hides from and to labels |
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-decorate-both | - | 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. <input value="25;42"> |
disable | data-disable | false | boolean | Locks slider and makes it inactive. Input is disabled too. Invisible to forms |
block | data-blokc | false | boolean | Locks slider and makes it inactive. Input is NOT disabled. Can be send with forms |
extra_classes | data-extra-classes | — | string | Traverse extra CSS-classes to sliders container |
scope | - | null | object | Scope for callbacks. Pass any object |
onStart | - | null | function | Callback. Is called on slider start. Gets all slider data as a 1st attribute |
onChange | - | null | function | Callback. IS called on each values change. Gets all slider data as a 1st attribute |
onFinish | - | null | function | Callback. Is called when user releases handle. Gets all slider data as a 1st attribute |
onUpdate | - | null | function | Callback. Is called when slider is modified by external methods update or reset |
Result is object type and passed to callback as first argument:
Obj: {
"input": object, // jQuery-link to input
"slider": object, // jQuery-link to sliders container
"min": 1000, // MIN value
"max": 100000, // MAX values
"from": 10000, // FROM value
"from_percent": 10, // FROM value in percents
"from_value": 0, // FROM index in values array (if used)
"to": 90000, // TO value
"to_percent": 90, // TO value in percents
"to_value": 0, // TO index in values array (if used)
"min_pretty": "1 000", // MIN prettified (if used)
"max_pretty": "100 000", // MAX prettified (if used)
"from_pretty": "10 000", // FROM prettified (if used)
"to_pretty": "90 000" // TO prettified (if used)
}
An example of a customised slider:
$("#example").ionRangeSlider({
skin: "big",
min: 0,
max: 10000,
from: 1000,
to: 9000,
type: 'double',
prefix: "$",
grid: true,
grid_num: 10
});
You can also initialise slider with data-* attributes of input tag:
data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"
To use public methods, at first you must save slider instance to variable:
// Launch plugin
$("#range").ionRangeSlider({
type: "double",
min: 0,
max: 1000,
from: 200,
to: 500,
grid: true
});
// Saving it's instance to var
var slider = $("#range").data("ionRangeSlider");
// Fire public method
slider.reset();
There are 3 public methods:
// UPDATE - updates slider to any new values
slider.update({
from: 300,
to: 400
});
// RESET - reset slider to it's first values
slider.reset();
// DESTROY - destroys slider and restores original input field
slider.destroy();
All plugins options are covered in demos.
Donate direct to my Paypal account: https://www.paypal.me/IonDen
FAQs
Cool, comfortable and easily customizable range slider with many options and skin support
The npm package ion-rangeslider receives a total of 43,255 weekly downloads. As such, ion-rangeslider popularity was classified as popular.
We found that ion-rangeslider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.