JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<input id="input" type="text" value="0">
<div>
    <div id="value" class="value"></div>
    <div class="slider">
        <span id="slider-begin" class="slider-begin slider-bound">0</span>
        <input id="range" type="range" min="0" max="100" step="1" value="0"></span>
        <span id="slider-end" class="slider-end slider-bound">0</span>
    </div>
</div>
<div id="output"><div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

.value {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

.slider-bound {
    font-weight: bold;
    font-size: 10px;
    color: #999;
}

JavaScript

(function() {
    //debugger;
    Ext.define('Adjustment', {
        extend: 'Ext.util.Observable',

        _attrs: {
            minValue: {
                value: 0
            },

            maxValue: {
                value: 1000
            },

            value: {
                value: 0
            }
        },

        constructor: function(config) {
            var checkRange = new Ext.util.DelayedTask(),
                config = config || {},
                key;

            // TODO: do hasOwnProperty foo here
            for (key in config) {
                if (_attrs[key]) {
                    this._set(key, config[key]);
                }
            }

            this.name = 'adjustment';
            // loop over _attrs and add _attr + 'Changed'
            this.addEvents('minValueChanged', 'maxValueChanged', 'valueChanged');

            this.listeners = config.listeners;
            this.callParent(arguments);

            this.on('valueChanged', function() {
                checkRange.delay(500, function() {
                    this.checkRange();
                }, this);
            }, this);

            this.checkRange();
        },

        get: function(attr) {
            return this._attrs[attr].value;
        },

        set: function(attr, newValue) {
            var oldValue = this.get(attr),
                eventName = attr + 'Changed';

            if (isNaN(newValue)) {
                return;
            }

            if (Number(newValue) !== oldValue) {
                this._set(attr, newValue);

                this.fireEvent(eventName, {
                    value: newValue
                });
            }
        },

        _set: function(attr, newValue) {
            if (isNaN(newValue)) {
                return;
            }

            this._attrs[attr].value = Number(newValue);
        },

        checkRange: function() {
            var value = this.get('value'),
                maxValue = 999999;

            if...