Flat UI Skin

Below is the default flat ui skin color.

HTML Code

<input type="text" id="rangeslider" name="example_name" value="">

Javascript Code

$('#rangeslider').ionRangeSlider();

Flat UI Color Variant

Below are the default flat ui skin with different color variant.

HTML Code

<input type="text" id="rangeslider" data-extra-classes="irs-primary">

Class Reference

Class	Value
data-extra-classes="irs-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark

Modern Skin

Below is the modern skin slider default.

HTML Code

<input type="text" id="rangeslider" data-extra-classes="irs-primary">

Modern Skin Color Variant

Below is the modern skin slider with different color variant.

HTML Code

<input type="text" id="rangeslider" data-extra-classes="irs-modern irs-primary">

Class Reference

Class	Value
data-extra-classes="irs-modern irs-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark

Outline Skin

Below are the outline skin slider default.

HTML Code

<input type="text" id="rangeslider" data-extra-classes="irs-outline irs-primary">

Outline Skin Color Variant

Below are the outline skin slider with different color variants to choose from.

HTML Code

<input type="text" id="rangeslider" data-extra-classes="irs-outline irs-primary">

Class Reference

Class	Value
data-extra-classes="irs-outline irs-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark