logologo-dark

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.

Code Example
<div class="form-control-wrap">    <div class="form-control-slider" data-start="30" id="Default-Range"></div></div>
Code ReferenceDetails
[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 ReferenceDetails
[data-min="0"]Use {number} with data-min attribute for minimum value (By default its '0')

Advanced Configuration

Code ReferenceDetails
[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.
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?