Sneak Peek! CoreUI 3 is coming! Please try the latest version - CoreUI PRO 3.0.0-alpha.. Try CoreUI PRO 3.0.0-alpha

Sliders

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

Examples

Start without params

CoreUI Pro Component

<input type="text" id="range_01" name="example_name" value="" />

<script>
  $('#range_01').ionRangeSlider();
</script>

Set min value, max value and start point

CoreUI Pro Component

<input type="text" id="range_02" name="example_name" value="" />

<script>
  $('#range_02').ionRangeSlider({
    min: 100,
    max: 1000,
    from: 550
  });
</script>

Set type to double and specify range, also showing grid and adding prefix “$”

CoreUI Pro Component

<input type="text" id="range_03" name="example_name" value="" />

<script>
  $('#range_03').ionRangeSlider({
    type: 'double',
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: '$'
  });
</script>

Set up range with negative values

CoreUI Pro Component

<input type="text" id="range_04" name="example_name" value="" />

<script>
  $('#range_04').ionRangeSlider({
    type: 'double',
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500
  });
</script>

Using step 250

CoreUI Pro Component

<input type="text" id="range_05" name="example_name" value="" />

<script>
  $('#range_05').ionRangeSlider({
    type: 'double',
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500,
    step: 250
  });
</script>

Set up range with fractional values, using fractional step

CoreUI Pro Component

<input type="text" id="range_06" name="example_name" value="" />

<script>
  $('#range_06').ionRangeSlider({
    type: 'double',
    grid: true,
    min: -12.8,
    max: 12.8,
    from: -3.2,
    to: 3.2,
    step: 0.1
  });
</script>

Set up you own numbers

CoreUI Pro Component

<input type="text" id="range_07" name="example_name" value="" />

<script>
  $('#range_07').ionRangeSlider({
    type: 'double',
    grid: true,
    from: 1,
    to: 5,
    values: [0, 10, 100, 1000, 10000, 100000, 1000000]
  });
</script>

Using any strings as your values

CoreUI Pro Component

<input type="text" id="range_08" name="example_name" value="" />

<script>
  $('#range_08').ionRangeSlider({
    grid: true,
    from: 5,
    values: ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']
  });
</script>

One more example with strings

CoreUI Pro Component

<input type="text" id="range_09" name="example_name" value="" />

<script>
  $('#range_09').ionRangeSlider({
    grid: true,
    from: 3,
    values: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
  });
</script>

No prettify. Big numbers are ugly and unreadable

CoreUI Pro Component

<input type="text" id="range_10" name="example_name" value="" />

<script>
  $('#range_10').ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 100000,
    step: 1000,
    prettify_enabled: false
  });
</script>

Prettify enabled. Much better!

CoreUI Pro Component

<input type="text" id="range_11" name="example_name" value="" />

<script>
  $('#range_11').ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 200000,
    step: 1000,
    prettify_enabled: true
  });
</script>

Don’t like space as separator? Use anything you like!

CoreUI Pro Component

<input type="text" id="range_12" name="example_name" value="" />

<script>
  $('#range_12').ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 300000,
    step: 1000,
    prettify_enabled: true,
    prettify_separator: '.'
  });
</script>

You don’t like default prettify function? Use your own!

CoreUI Pro Component

<input type="text" id="range_13" name="example_name" value="" />

<script>
  $('#range_13').ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 400000,
    step: 1000,
    prettify_enabled: true,
    prettify: function prettify(num) {
      return (Math.random() * num).toFixed(0);
    }
  });
</script>

Using prefixes

CoreUI Pro Component

<input type="text" id="range_14" name="example_name" value="" />

<script>
  $('#range_14').ionRangeSlider({
    type: 'double',
    grid: true,
    min: 0,
    max: 10000,
    from: 1000,
    step: 9000,
    prefix: '$'
  });
</script>

Using postfixes

CoreUI Pro Component

<input type="text" id="range_15" name="example_name" value="" />

<script>
  $('#range_15').ionRangeSlider({
    type: 'single',
    grid: true,
    min: -90,
    max: 90,
    from: 0,
    postfix: '°'
  });
</script>

Whant to show that max number is not the biggest one?

CoreUI Pro Component

<input type="text" id="range_16" name="example_name" value="" />

<script>
  $('#range_16').ionRangeSlider({
    grid: true,
    min: 18,
    max: 70,
    from: 30,
    prefix: 'Age ',
    max_postfix: '+'
  });
</script>

Taking care about how from and to values connect? Use decorate_both option:

CoreUI Pro Component

<input type="text" id="range_17" name="example_name" value="" />

<script>
  $('#range_17').ionRangeSlider({
    type: 'double',
    min: 100,
    max: 200,
    from: 145,
    to: 155,
    prefix: 'Weight: ',
    postfix: ' million pounds',
    decorate_both: true
  });
</script>

Remove double decoration

CoreUI Pro Component

<input type="text" id="range_18" name="example_name" value="" />

<script>
  $('#range_18').ionRangeSlider({
    type: 'double',
    min: 100,
    max: 200,
    from: 145,
    to: 155,
    prefix: 'Weight: ',
    postfix: ' million pounds',
    decorate_both: false
  });
</script>

Use your own separator symbol with values_separator option. Like →

CoreUI Pro Component

<input type="text" id="range_19" name="example_name" value="" />

<script>
  $('#range_19').ionRangeSlider({
    type: 'double',
    min: 100,
    max: 200,
    from: 148,
    to: 152,
    prefix: 'Weight: ',
    postfix: ' million pounds',
    values_separator: ' → '
  });
</script>

Or “ to “:

CoreUI Pro Component

<input type="text" id="range_20" name="example_name" value="" />

<script>
  $('#range_20').ionRangeSlider({
    type: 'double',
    min: 100,
    max: 200,
    from: 148,
    to: 152,
    prefix: 'Range: ',
    postfix: ' light years',
    decorate_both: false,
    values_separator: ' to '
  });
</script>

You can disable all the sliders visual details, if you wish. Like this:

CoreUI Pro Component

<input type="text" id="range_21" name="example_name" value="" />

<script>
  $('#range_21').ionRangeSlider({
    type: 'double',
    min: 1000,
    max: 2000,
    from: 1200,
    to: 1800,
    hide_min_max: true,
    hide_from_to: true,
    grid: false
  });
</script>

Or hide any part you wish

CoreUI Pro Component

<input type="text" id="range_22" name="example_name" value="" />

<script>
  $('#range_22').ionRangeSlider({
    type: 'double',
    min: 1000,
    max: 2000,
    from: 1200,
    to: 1800,
    hide_min_max: true,
    hide_from_to: true,
    grid: false
  });
</script>

And some more

CoreUI Pro Component

<input type="text" id="range_23" name="example_name" value="" />

<script>
  $('#range_23').ionRangeSlider({
    type: 'double',
    min: 1000,
    max: 2000,
    from: 1200,
    to: 1800,
    hide_min_max: false,
    hide_from_to: true,
    grid: false
  });
</script>

And some more

CoreUI Pro Component

<input type="text" id="range_24" name="example_name" value="" />

<script>
  $('#range_24').ionRangeSlider({
    type: 'double',
    min: 1000,
    max: 2000,
    from: 1200,
    to: 1800,
    hide_min_max: true,
    hide_from_to: false,
    grid: false
  });
</script>

Settings

Option	Data-Attr	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 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`

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": 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)
}

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 <code>data-*</code> 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();

Examples
Settings
Description of data passed to callbacks (onChange and etc.)
Creating slider (all params)
Public methods