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