Range Slider
Falcon uses noUiSlider for advance range slider. noUiSlider is a lightweight range slider with multi-touch support and a ton of features.
Documentation for noUiSliderDefault
<div data-nouislider="data-nouislider"></div>Range Connect
<div data-nouislider='{"start":[20,80],"connect":true}'></div>With Pips
<div class="mb-5" data-nouislider='{"step":10,"pips":{"mode":"steps","stepped":true}}'></div>Colored Sliders
<div class="noUi-primary mb-4" data-nouislider='{"start":[45]}'></div>
<div class="noUi-success mb-4" data-nouislider='{"start":[35]}'></div>
<div class="noUi-secondary mb-4" data-nouislider='{"start":[55]}'></div>
<div class="noUi-info mb-4" data-nouislider='{"start":[40]}'></div>
<div class="noUi-warning mb-4" data-nouislider='{"start":[70]}'></div>
<div class="noUi-danger" data-nouislider='{"start":[65]}'></div>Styling
Circle handle
Square handle
Control height
Update --falcon-noUi-track-height and --falcon-noUi-handle-top variables to control the track height and handle position.
<h6 class="mb-2">Circle handle</h6>
<div class="noUi-handle-circle noUi-danger mb-4" data-nouislider='{"start":[55]}'></div>
<h6 class="mb-2">Square handle</h6>
<div class="noUi-handle-square mb-4" data-nouislider='{"start":[25]}'></div>
<h6 class="mb-2">Control height</h6>
<div class="noUi-slider-slim mb-3" data-nouislider='{"start":[25]}'></div>
<p class="mb-0">Update <code>--falcon-noUi-track-height </code>and <code>--falcon-noUi-handle-top </code>variables to control the track height and handle position.</p>Stylesheet
<link href="vendors/nouislider/nouislider.min.css" rel="stylesheet" />Javascript
<script src="vendors/nouislider/nouislider.min.js"></script>
