1. SmartAdmin
  2. Form Plugins
  3. Ion.RangeSlider
  4. 2025-08-19 (ķ™”)

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

About

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 "$"
$200$80002505007501 000

Set up range and step

Force fractional values, using fractional step 0.1
-3.23.2-12.8-6.406.412.8

Using array of custom values

Values array could be anything, even strings
JanAugJanMaySep

Change visual look of numbers (prettify)

Use your own prettify function to transform numbers whatever you like
1000 ā†’ 9.966100 ā†’ 6.6441 ā†’ 0501 ā†’ 8.9691000 ā†’ 9.966

Decorating with prefixes, postfixes

Using prefix and postfix at the same time, taking care of labels collision
Weight: 47 lbs ā€” Weight: 53 lbs0255075100

Manipulating UI

Disable enable any UI elements
-100 000100 000-100 000-50 000050 000100 000

Customising Grid

Manipulate the grid using build in parameters
10 00077702 5005 00010 000

Lock and restrict handles

Limit movement of a handle
050002505001 000

Manipulating interval

Restrict interval size and/or drag it
400 ā€” 600

Working with dates

Restrict interval size and/or drag it
11/8/201811/23/201811/1/201811/8/201811/16/201811/23/201812/1/2018