Skip to content

acerb/ion.rangeSlider

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ion.Range Slider 1.9.1

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

Easy and light range slider Project page and demos

Download: ion.rangeSlider-1.9.1.zip


Description

  • Ion.RangeSlider — cool, comfortable 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.

Key features

  • Skin support. (3 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 edit step
  • Support of custom values diapason (See months example)
  • Automatically generated grid
  • Ability to disable UI elements (min and max, current value, grid)
  • Postfixes and prefixes for you numbers ($20, 20 € etc.)
  • Additional postfix for maximum value (eg. $0 — $100+)
  • Ability to prettify large numbers (eg. 10000000 -> 10 000 000)
  • Slider writes it's 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 and remove) to control it after creation
  • For advanced users slider has callbacks (onLoad, onChange, onFinish). Slider paste all it's params to callback first argument as object

Dependencies

Usage

Add the following libraries to the page:

  • jQuery
  • ion.rangeSlider.min.js

Add the following stylesheets to the page:

  • normalize.min.css (If not already present)
  • ion.rangeSlider.css

Plus, a skin for the slider. Two skins are included:

  • ion.rangeSlider.skinNice.css
  • ion.rangeSlider.skinSimple.css

Don't forget about skin image sprite:

  • sprite-skin-simple.png - Simple skin
  • sprite-skin-nice.png - Nice skin Or use the included PSD file and design a custom skin.

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

Settings

Property Default Description
type "single" Optional property, will select slider type from two options: single - for single range slider, or double - for double range slider
min 10 Optional property, automatically set from the value attribute of base input. For example: if value="10;100", it will be 10
max 100 Optional property, automatically set from the value attribute of base input. For example: if value="10;100", it will be 100
from min Optional property, on default has the same value as min. overwrite default FROM setting
to max Optional property, on default has the same value as max. overwrite default TO setting
step 1 Optional property, set slider step value
prefix - Optional property, set prefix text to all values. For example: "$" will convert "100" in to "$100"
postfix - Optional property, set postfix text to all values. For example: " €" will convert "100" in to "100 €"
maxPostfix - Optional property, set postfix text to maximum value. For example: maxPostfix - "+" will convert "100" to "100+"
hasGrid false Optional property, enables grid at the bottom of the slider (it adds 20px height and this can be customised through CSS)
hideMinMax false Optional property, disables Min and Max fields.
hideFromTo false Optional property, disables From an To fields.
prettify true Optional property, allow to separate large numbers with spaces, eg. 10 000 than 10000
disable false Disables the slider
values null Array of custom values: [a, b, c] etc.

Callbacks

Property Default Description
onLoad - Triggered once, after slider loaded and each time after slider updated via method Update.
onChange - Triggered live as the slider value is changed. Returns object with all slider values
onFinish - Triggered once, after slider work is done. Returns object with all slider values

Description of data passed to callbacks

Each callback have object with slider data as a first argument:

Obj: {
    "input": object,    // jQuery-link to input
    "slider": object,   // jQuery-link to slider container
    "min": 10,          // MIN value
    "max": 20,          // MAX value
    "fromNumber": 10,   // FROM value
    "toNumber": 20,     // TO value
    "fromPers": 25,     // FROM value in percents
    "toPers": 75,       // TO value in percents
    "fromX": 100,       // x-coordinate of FROM-slider in pixels
    "toX": 200          // x-coordinate of TO-slider in pixels
}

Creating slider (all params)

An example of a customised slider:

$("#someID").ionRangeSlider({
    min: 10,                        // min value
    max: 100,                       // max value
    from: 30,                       // overwrite default FROM setting
    to: 80,                         // overwrite default TO setting
    type: "single",                 // slider type
    step: 10,                       // slider step
    prefix: "$",                    // prefix value
    postfix: " €",                  // postfix value
    maxPostfix: "+",                // postfix to maximum value
    hasGrid: true,                  // enable grid
    hideMinMax: true,               // hide Min and Max fields
    hideFromTo: true,               // hide From and To fields
    prettify: true,                 // separate large numbers with space, eg. 10 000
    disable: false,                 // disable slider
    values: ["a", "b", "c"],        // array of custom values
    onLoad: function (obj) {        // callback is called after slider load and update
        console.log(obj);
    },
    onChange: function (obj) {      // callback is called on every slider change
        console.log(obj);
    },
    onFinish: function (obj) {      // callback is called on slider action is finished
        console.log(obj);
    }
});

You can also initialise slider with data-* attributes of input tag:

data-from="30"                      // default FROM setting
data-to="70"                        // default TO setting
data-type="double"                  // slider type
data-step="10"                      // slider step
data-prefix="$"                     // prefix value
data-postfix=" €"                   // postfix value
data-maxpostfix="+"                 // postfix to maximum value
data-hasgrid="true"                 // enable grid
data-hideminmax="true"              // hide Min and Max fields
data-hidefromto="true"              // hide From and To fields
data-prettify="false"               // don't use spaces in large numbers, eg. 10000 than 10 000
data-values="a,b,c"                 // comma separated predefined slider values

Public methods

Slider update, method update:

$("#someID").ionRangeSlider("update", {
    min: 20,                        // change min value
    max: 90,                        // change max value
    from: 40,                       // change default FROM setting
    to: 70,                         // change default TO setting
    step: 5                         // change slider step
});

Slider remove, method remove:

$("#someID").ionRangeSlider("remove");

Update history

  • April 15, 2014 - Fixed some bugs: #81, #82, #85
  • March 16, 2014 - New plugin description. New demos design. Some new slider params. Issues: #65, #68, #70, #77, #78
  • January 12, 2014 - Fixed some bugs and some new features. Issues: #12, #30, #33, #43, #47, #52, #58
  • October 31, 2013 - Fixed bugs: #13, #31, #35, #37, #40, and some code optimisations
  • October 10, 2013 - New Flat UI Skin. Some skin optimisations. Fixed issue #25.
  • October 08, 2013 - Fixed issues #20, #21, #23, #24, #26. Removed hideText option. New method and options. Improved code style. Minor optimisations.
  • September 11, 2013 - Fixed bug on Android-devices. Added support for negative and fractional values. Issues #15, #16
  • August 23, 2013 - Issues #7, #8, #9, #10 fixed and some enhancements
  • July 29, 2013 - Issue #2 fixed. Versioning changed
  • June 30, 2013 - minor bug fixes and new option "hideText"
  • June 21, 2013 - added the ability to display the grid
  • June 21, 2013 - minor bug fix
  • June 06, 2013 - new public methods and some code optimisations
  • June 06, 2013 - some small css updates
  • April 30, 2013 - new method onFinish
  • February 15, 2013 - new feature to set slider settings through data-* attributes of input tag

Packages

No packages published

Languages

  • JavaScript 81.0%
  • CSS 19.0%