Range
Examples and usage guidelines for range slider with noUislider plugin.
Example
data-start="20"attribute to specify value for slider handle, this can take multiple value saparated with an space like this[data-start="20 40"].data-step="10"attribute to enable slider step mode.data-connect="upper"attribute to specify if slider handles are connected with something. you can use{lower, upper, true, false}with this.lowerconnects with start point,upperconnects with end point,trueconnects 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"].
<div class="form-group"> <label class="form-label">Default Range Slider</label> <div class="form-control-wrap"> <div class="js-range" data-start="30" id="DefaultRange"></div> </div></div>Example
Use
data-orientation="vertical" attribute to enable vertical mode. <div class="form-group"> <label class="form-label">Default Range Slider</label> <div class="form-control-wrap"> <div class="js-range" data-orientation="vertical" data-start="30" id="vertical-Default-Range"></div> </div></div>Example
Use
data-tooltip="true" attribute to enable Tooltip mode. <div class="form-group"> <label class="form-label">Tooltip Slider</label> <div class="form-control-wrap"> <div class="js-range" data-tooltip="true" data-start="40" id="Tooltip-Range"></div> </div></div>Example
Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.
Use
type="range" attribute to input to enable range mode. <div class="form-group"> <label for="customRange1" class="form-label">Default range</label> <div class="form-control-wrap"> <input type="range" class="form-range" id="customRange1"> </div></div>
