@@include('../layouts/head-page-meta.html', {'title': 'NoUiSlider'}) @@include('../layouts/head-css.html')
@@include('../layouts/layout-vertical.html')
@@include('../layouts/breadcrumb.html', {'breadcrumb-item': 'Forms', 'breadcrumb-item-active': 'NoUiSlider'})
@@include('../layouts/component/component-link.html',{ title:'noUiSlider', text:'noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs.', link:'https://refreshless.com/nouislider/'})
Basic Setup
Input control is attached to slider
Working with dates
dates to numerical ranges, and then use the update event to display them in a pretty format.
Moving the slider by clicking pips
Slider With Tooltip
always show slider values.
Using HTML5 input elements
noUiSlider's `'update'` method is useful for synchronizing with other elements
Soft Limits
If you want to disable the edges of a slider, the set event can be used to reset the value if a limit is passed.
Vertical Slider
Vertical orientation slider example
@@include('../layouts/footer-block.html') @@include('../layouts/footer-js.html') @@include('../layouts/customizer.html')