Basic Configuration
For input slider use .form-control-slider class on a blank div that must have an id.
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
| Code Reference | Details |
|---|---|
[data-min="0"] |
Use {number} with data-min attribute for minimum value (By default its '0') |
Advanced Configuration
| 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. |
