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>

Price Range

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: Boolean: When set to `true`, the handle will animate with the default duration. String: The name of a speed, such as `fast` or `slow`. Number: The duration of the animation, in milliseconds.
`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: Boolean: If set to `true`, the slider will detect if you have two handles and create a styleable range element between these two. String: Either `min` or `max`. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.

For more event and method please visit jQuery UI Slider