This Feature is in Development Mode and its not included in Tornado UI Yet.
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" />