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
Default
<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>

Thank you for creating with Falcon |
2023 © Themewagon

v3.17.0

Settings

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.

Purchase
customize