Do you know the latest update of 2022? A overview of our is now available on YouTube

Components

## noUislider

Examples and usage guidelines for range slider with noUislider plugin.

#### Basic Configuration

For input slider use `.form-control-slider` class on a blank div that must have an `id`.

Default Range Slider
Range Connect (upper)
Range Slider Step (10)
Range Multiple

###### Code Example

    <div class="form-control-wrap">
        <div class="form-control-slider" data-start="30" id="Default-Range"></div>
    </div>

Code Reference | Details
--- | ---
`[data-min="0"]` | Use `{number}` with `data-min` attribute for minimum value (By default its '0')
`[data-max="0"]` | Use `{number}` with `data-max` attribute for maximum value (By default its '100')
`[data-start="20"]` | Use `{number}` with `data-start` attribute to specify value for slider handle, this can take multiple value saparated with an space like this `[data-start="20 40"]`
`[data-connect="lower"]` | Use `{value}` with `data-connect` attribute to specify if slider handles are connected with something. you can use `{lower, upper, true, false}` with this. `lower` connects with start point, `upper` connects with end point, `true` connects handles with each other. Also you need to make combination with handle count with connect points, this can take multiple value saparated with an space like this `[data-connect="lower false true upper"]`

#### Vertical Slider

To make this vertical just add `[data-orientation="vertical"]` attribute on `.form-control-slider` element

Default Range Slider
Range Connect (upper)
Range Slider Step (10)
Range Multiple

Code Reference | Details
--- | ---
`[data-min="0"]` | Use `{number}` with `data-min` attribute for minimum value (By default its '0')

#### Advanced Configuration

Tooltip Slider
Minimum Distance Slider
Maximum Distance Slider

Code Reference | Details
--- | ---
`[data-tooltip="true"]` | Use `{boolean}` with `data-tooltip` attribute to show or hide tooltip.
`[data-min-distance="20"]` | Use `{number}` with `data-min-distance` attribute to define minimum range value, keep in mind that if you are using step value with this then this value must be dividable with step value.
`[data-max-distance="20"]` | Use `{number}` with `data-max-distance` attribute to define maximum range value, keep in mind that if you are using step value with this then this value must be dividable with step value.

##### Select Your Countryy

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State