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 noUiSlider
<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>
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>
<link href="vendors/nouislider/nouislider.min.css" rel="stylesheet" />
<script src="vendors/nouislider/nouislider.min.js"></script>

Thank you for creating with Falcon |
2023 © Themewagon



Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.