RANGE SLIDER

Tornado Provide a Predesigned Standard Form Controls With Support for Multiple Themes Style and Many Other Useful Features.

RANGE INITIALIZE

Tornado Forms provide a method called range that you can use to create and activate the range slider component and you can use it like this Tornado.forms.range(selector, options);

//======> Import Forms Methods <=======//
import Forms from './Base/Forms';

//====> Activate Range Slider <====//
Forms.range('.range-slider');

//====> or From Global Methods <====//
Tornado.forms.range('.range-slider');

RANGE MARKUP

the markup of range slider is pretty simple you create a text input with class name .range-slider and set the minimum and maximum range with data-min and data-max attributes and you can set a value as string array separated by comma in value attribute.

<!-- Range Slider -->
<input type="text" class="range-slider" data-min="0" data-max="6845" value="0" />

<!-- Range Slider Connected -->
<input type="text" class="range-slider" data-min="0" data-max="6845" value="0,4450" />