SMusatov/gentelella: Free Bootstrap 4 Admin Dashboard Template @ 19f749f846dc51127a7c0190a9dee4881a627339

English description | Описание на русском

Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.

Description

Ion.RangeSlider — cool, comfortable, responsive and easily customizable range slider
Supports events and public methods, has flexible settings, can be completely altered with CSS
Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
Ion.RangeSlider supports touch-devices (iPhone, iPad, Nexus, etc.).
Ion.RangeSlider freely distributed under terms of MIT licence.
With this plugin you will be able to build beautiful range sliders, like this:

Key features

Skin support. (5 skins included and PSD for skin creation)
Any number of sliders at one page without conflicts and big performance problems
Two slider types single (1 slider) and double (2 sliders)
Support of negative and fractional values
Ability to set custom step and snap grid to step
Support of custom values diapason
Customisable grid of values
Ability to disable UI elements (min and max, current value, grid)
Postfixes and prefixes for your numbers ($20, 20 € etc.)
Additional postfix for maximum value (eg. $0 — $100+)
Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
Slider writes its value right into input value field. This makes it easy to use in any html form
Any slider value can be set through input data-attribute (eg. data-min="10")
Slider supports disable param. You can set it true to make slider inactive
Slider supports external methods (update, reset and remove) to control it after creation
For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
Slider supports date and time

Demos

Dependencies

jQuery 1.8.x+

Usage

Add the following libraries to the page:

jQuery
ion.rangeSlider.min.js

Add the following stylesheets to the page:

normalize.css (optional)
ion.rangeSlider.css

Plus, a skin for the slider. 5 skins are included. Choose one:

ion.rangeSlider.skinFlat.css + sprite-skin-flat.png
ion.rangeSlider.skinHTML5.css + no images
ion.rangeSlider.skinModern.css + sprite-skin-modern.png
ion.rangeSlider.skinNice.css + sprite-skin-nice.png
ion.rangeSlider.skinSimple.css + sprite-skin-simple.png

Or use the included PSD file and design a custom skin.

Install with bower

bower install ionrangeslider

Install with npm

npm install ion-rangeslider

Initialisation

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();

Demo for juniors

If your are new in web development and you are not sure how to correctly install the plugin to your web-page, please download this demo example

Migrating from 1.x to 2.x

All params (except functions) are lowercase now: param_name, not paramName
Same param names was changed: hasGrid → grid, onLoad → onStart
Callbacks data object format was changed. Example: fromNumber → from
Slider now writes it's result to value attribute and also to data-from and data-to attributes

Experiments playground

Settings

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, are no longer can 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`.

Description of data passed to callbacks (onChange and etc.)

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": 0,           // MIN value
    "max": 1000,        // MAX values
    "from": 100,        // FROM value (left or single handle)
    "from_percent": 10, // FROM value in percents
    "from_value": 0,    // FROM index in values array (if used)
    "to": 900,          // TO value (right handle in double type)
    "to_percent": 90,   // TO value in percents
    "to_value": 0       // TO index in values array (if used)
}

Creating slider (all params)

An example of a customised slider:

$("#example").ionRangeSlider({
    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"

Public methods

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();

readme.md 17 KB

History Raw

Description

Key features

Demos

Dependencies

Usage

Install with bower

Install with npm

Initialisation

Demo for juniors

Migrating from 1.x to 2.x

Experiments playground

Settings

Description of data passed to callbacks (onChange and etc.)

Creating slider (all params)

Public methods

One more look on demos

Update history

Support Ion-series plugins development:

readme.md 17 KB History Raw

Description

Key features

Demos

Dependencies

Usage

Install with bower

Install with npm

Initialisation

Demo for juniors

Migrating from 1.x to 2.x

Experiments playground

Settings

Description of data passed to callbacks (onChange and etc.)

Creating slider (all params)

Public methods

One more look on demos

Update history

Support Ion-series plugins development:

readme.md 17 KB

History Raw