1. Hyper
  2. Extended UI
  3. Range Slider

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
Color Scheme
Width
Purchase Now