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


Demo Page github.com Page

Ion Range Slider Flat skin

Start with min, max, from.

Start with min, max, from.

Set min value, max value and start point.

Set type to double and specify range, also showing grid and adding prefix "$".

Set up range with negative values.

Range using step 100.

Range using strings.

Prettify visual look of numbers.

using disable: true

For example calculating logarithm of a number

For example using fractional step 0.1

By using drag_interval: true

Ion Range Slider Big skin

Start with min, max, from.

Start with min, max, from.

Set min value, max value and start point.

Set type to double and specify range, also showing grid and adding prefix "$".

Set up range with negative values.

Range using step 100.

Range using strings.

Prettify visual look of numbers.

using disable: true

For example calculating logarithm of a number

For example using fractional step 0.1

By using drag_interval: true

Ion Range Slider Modern skin

Start with min, max, from.

Start with min, max, from.

Set min value, max value and start point.

Set type to double and specify range, also showing grid and adding prefix "$".

Set up range with negative values.

Range using step 100.

Range using strings.

Prettify visual look of numbers.

using disable: true

For example calculating logarithm of a number

For example using fractional step 0.1

By using drag_interval: true

Ion Range Slider Sharp skin

Start with min, max, from.

Start with min, max, from.

Set min value, max value and start point.

Set type to double and specify range, also showing grid and adding prefix "$".

Set up range with negative values.

Range using step 100.

Range using strings.

Prettify visual look of numbers.

using disable: true

For example calculating logarithm of a number

For example using fractional step 0.1

By using drag_interval: true

Ion Range Slider Round skin

Start with min, max, from.

Start with min, max, from.

Set min value, max value and start point.

Set type to double and specify range, also showing grid and adding prefix "$".

Set up range with negative values.

Range using step 100.

Range using strings.

Prettify visual look of numbers.

using disable: true

For example calculating logarithm of a number

For example using fractional step 0.1

By using drag_interval: true

Ion Range Slider Square skin

Start with min, max, from.

Start with min, max, from.

Set min value, max value and start point.

Set type to double and specify range, also showing grid and adding prefix "$".

Set up range with negative values.

Range using step 100.

Range using strings.

Prettify visual look of numbers.

using disable: true

For example calculating logarithm of a number

For example using fractional step 0.1

By using drag_interval: true