Sometimes small things matter the most in life!
A slider, also known as a track bar, allows users to set or adjust a value. When the user changes the value, it does not change the format of the interface or other info on the screen.
VIA senior product manage
for UI/UX at REVOX
noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.
noUiSlider works with pretty much any device, mouse, touchscreen or both, and it'll work beautifully in responsive designs.
see the plugin for uiSlider
http://refreshless.com/nouislider/
noUiSlider supports IE9 and up, and of course the latest versions of the 'evergreen' browsers: Chrome, Safari, Firefox and Opera.
Connect
Basic slider with different color options, use of the below classes to quickly create a styled slider. Uses native boostrap colors scheme classes
All the colours included in pages color palette is applied to the default pages slider.
See color PalleteAll colors included except for the menu-color
Connect
The connect setting can be used to control the bar between the handles, or the edges of the slider. Use "lower" to connect to the lower side, or "upper" to connect to the upper side. Setting true sets the bar between the handles.
Margin
When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on standard linear sliders.
Limit
The limit option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the limit option can only be used on linear sliders.
Step
By default, the slider slides fluently. In order to make the handles jump between intervals, you can use this option. The step option is relative to the values provided to the range.
Orientation
The orientation setting can be used to set the slider to "vertical" or "horizontal".Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. You can use any unit you want, including % or px.
Ion.RangeSlider is an easily customizable range slider that supports events and public methods which have flexible settings that can be completely altered with CSS.
see the plugin for uiSlider
http://ionden.com/a/plugins/ion.rangeSlider/en.html
Ion.RangeSlider is the best when dealing with advanced options. It has many features like, Ability to prettify large numbers, Support of custom values diapason, etc..
The sliders are made with an automatically generated grid system that will adapt to any screen size.
Color Options
Basic slider with different color options, use of the below classes to quickly create a styled slider. Uses native boostrap colors scheme classes
0to 5000
+to max value
double
$
double
TRUE
1000to
100 000
30 000to
90 000
EUROto max value
$
double
$
TRUE
0to
10
0.1
TRUE
-50+50
5000
0
Degress
+to max value
1000
Hide
Miles
