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 noUiSlider10.00
0
10
20
30
40
50
60
70
80
90
100
<div class="mb-5" data-nouislider='{"step":10,"pips":{"mode":"steps","stepped":true}}'></div>45.00
35.00
55.00
40.00
70.00
65.00
<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>Circle handle
55.00
Square handle
25.00
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>
