Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Range Slider - Tornado UI

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

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" />

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.