Range Slider
A jquery plugin to convert input into range slider.
Official documentation
For more detailed information and examples, see the official documentation: Jquery UI Slider .
How to use? #
Copy-paste the stylesheets <link>
into your
<head> to load the CSS.
<link rel="stylesheet" href="vendors/jquery-ui/jquery-ui.min.css">Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="vendors/jquery-ui/jquery-ui.min.js"></script>Basic example #
From
<div class="form-group price-range">
<label class="form-label">
Price Range
</label>
<div id="price" data-slider="true"
data-slider-options='{"min":0,"max":4000,"values":[0,2000]}'></div>
<div class="description">
From <input type="text" readonly class="amount border-0">
</div>
</div>For more example please visvit jQuery UI Slider Examples
JavaScript behavior #
Options can be passed via data attributes or JavaScript. For data attributes,
append the option name to data-slider-options.
Example: data-slider-options='{"min":"0"}'
| Attributes | Description |
|---|---|
animate |
Default false. Whether to
slide the handle smoothly when the user clicks on the slider track.
Also accepts any valid animation duration.
Multiple types supported:
|
classes |
Default
{
"ui-slider": "ui-corner-all",
"ui-slider-handle": "ui-corner-all",
"ui-slider-range": "ui-corner-all ui-widget-header"
}. Specify additional classes to add to the widget's
elements. Any of classes specified in the Theming
section can be
used as keys to override their value. To learn more about this
option, check out the
learn article about the classes option
.
|
disabled |
Default disabled . Disables
the slider if set to true
|
orientation |
Default horizontal.
Determines whether the slider handles move horizontally (min on
left, max on right) or vertically (min on bottom, max on top).
Possible values vertical or horizontal
|
max |
Default 100. The maximum
value of the slider.
|
min |
Default 0. The minimum value
of the slider.
|
value |
Default 0. Determines the
value of the slider, if there's only one handle. If there is more
than one handle, determines the value of the first handle.
|
values |
Default null. This option can
be used to specify multiple handles. If the range option is set to
true, the length of values
should be 2.
|
step |
Default 1. Determines the
size or amount of each interval or step the slider takes between the
min and max. The full specified value range of the slider (max -
min) should be evenly divisible by the step.
|
range |
Default false.Whether the
slider represents a range.
Multiple types supported:
|
For more event and method please visit jQuery UI Slider