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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

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