Range Slider
Default
Start with default options
10010
<!-- Range Silder -->
<input type="text" id="range_01" data-plugin="range-slider" />
Prefix
Showing grid and adding prefix "$"
$200$80002505007501 000
<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)
-500500-1 000-50005001 000
<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!
1 000 000200 0001 000500 5001 000 000
<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?
Age70+Age301831445770
<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
90 °0 °-90-4504590
<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
100550
<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
-500500-1 000-50005001 000
<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
DecemberAprilJanuaryMayJulySeptember
<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
100550
<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
Weight 145 million pounds — Weight 155 million pounds
<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
1 0002 000
<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" />