#### Range Slider

#### Default

Start with default options

                                                            <input type="text" id="range_01" data-plugin="range-slider" />

#### Prefix

Showing grid and adding prefix "$"

                                                            <input type="text" id="range_03" data-plugin="range-slider" data-type="double"
                                                                data-grid="true" data-min="0" data-max="1000" data-from="200" data-to"800"
                                                                data-prefix="$" />

#### Step

Increment with specific value only (step)

                                                            <input type="text" id="range_05" data-plugin="range-slider"
                                                                data-type="double" data-grid="true" data-min="-1000" data-max="1000"
                                                                data-from="-500" data-to="500" data-step="250" />

#### Prettify Numbers

Prettify enabled. Much better!

                                                            <input type="text" id="range_07" data-plugin="range-slider"
                                                                data-grid="true" data-min="1000" data-max="1000000"
                                                                data-step="1000" data-from="200000" data-to="1000" data-prettify_enabled="true" /<

#### Extra Example

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

                                                            <input type="text" id="range_09" data-plugin="range-slider"
                                                                data-grid="true" data-min="18" data-max="70" data-prefix="Age"
                                                                data-max_postfix="+" data-from="30" data-to="1000" />

#### Postfixes

Using postfixes

                                                            <input type="text" id="range_11" data-plugin="range-slider"
                                                                data-type="single" data-grid="true" data-min="-90" data-max="90"
                                                                data-postfix=" Â°" data-from="0" />

#### Min-Max

Set min value, max value and start point

                                                            <input type="text" id="range_02" data-plugin="range-slider"
                                                                data-min="100" data-max="1000" data-from="550" />

#### Range

Set up range with negative values

                                                            <input type="text" id="range_04" data-plugin="range-slider"
                                                                data-min="-1000" data-max="1000" data-from="-500" data-to="500"
                                                                data-type="double" data-grid="true" />

#### Custom Values

Using any strings as values

                                                            <input type="text" id="range_06" data-plugin="range-slider"
                                                                data-grid="true" data-from="3"
                                                                data-values='January,February,March,April,May,June,July,Auguest,September,October,November,December' />

#### Disabled

Lock slider by using disable option

                                                            <input type="text" id="range_08" data-plugin="range-slider"
                                                                data-min="100" data-max="1000" data-from="550" data-disable="true" />

#### Use Decorate Both option

Use decorate_both option

                                                            <input type="text" id="range_10" data-plugin="range-slider"
                                                                data-type="double" data-min="100" data-max="200" data-from="145"
                                                                data-to="155" data-prefix="Weight " data-postfix=" million pounds"
                                                                data-decorate_both="true" />

#### Hide

Or hide any part you wish

                                                            <input type="text" id="range_12" data-plugin="range-slider"
                                                                data-type="double" data-min="1000" data-max="2000" data-from="1200"
                                                                data-to="1800" data-hide_min_max="true" data-hide_from_to="true"
                                                                data-grid="true" />

##### Settings

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now