JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all.js"></script>

JavaScript

Ext.QuickTips.init();
Ext.apply(Ext.form.VTypes, {
    numberrange: function(val, field) {
        if (Number(val) < field.minValField || Number(val) > field.maxValField) {
            field.vtypeText = 'Value Range Should Be2: ' + field.minValField + '-' + field.maxValField;
            return false;
        }
        return true;
    },
    numberrangeText: 'Value Range Should Be: '

});

var form = new Ext.form.FormPanel({
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        vtype: 'numberrange',
        minValField: 10,
        maxValField: 20,
        fieldLabel: 'Range from 10 to 20'
        },
    {
        xtype: 'textfield',
        vtype: 'numberrange',
        minValField: 1,
        maxValField: 20,
        fieldLabel: 'Range from 1 to 20';
        }]
});