Ion.RangeSliderADDON Easy to use, flexible and responsive range slider with skin support


Easy to use, flexible and responsive range slider comes with skin support (6 skins included). Features include two types of sliders (1 or double), support for negative and fractional values. Ability to setup custom step and snap to grid option. Customizable grid values and the ability to add port & prefixes. Slider writes its value right into input value field, making it easy to use in any HTML form. You can have many sliders in one page without any conflict.

Find in-depth, guidelines, tutorials and more on Ion.RangeSlider's Official Documentation

Skin Options

Simple start basic params

Set type to double, specify range, show grid and add a prefix "$"

Set up range and step

Force fractional values, using fractional step 0.1

Using array of custom values

Values array could be anything, even strings

Change visual look of numbers (prettify)

Use your own prettify function to transform numbers whatever you like

Decorating with prefixes, postfixes

Using prefix and postfix at the same time, taking care of labels collision

Manipulating UI

Disable enable any UI elements

Customising Grid

Manipulate the grid using build in parameters

Lock and restrict handles

Limit movement of a handle

Manipulating interval

Restrict interval size and/or drag it

Working with dates

Restrict interval size and/or drag it