JSFiddle - React, Tailwind, and code Playground

JavaScript

enyo.ready(function() {
    enyo.kind({
        name: "MyControl",
        model: null,
        components: [
            {kind: "enyo.Control", name: "nameLabel"},
            {kind: "onyx.Slider", name: "slider", onChanging: "sliderChanging"},
            {kind: "enyo.Input", name: "input", oninput: "inputChanged"}
        ],
        create: function() {
            this.inherited(arguments);
            this.set("$.nameLabel.content", this.get("model.name"));
            this.set("$.slider.value", this.get("model.value"));
            this.set("$.input.value", this.get("model.value"));
        },
        sliderChanging: function(inSender, inEvent) {
            this.set("$.input.value", inEvent.value);
            this.set("model.value", inEvent.value)
        },
        inputChanged: function(inSender, inEvent) {
            this.set("$.slider.value", inSender.get("value"));
            this.set("model.value", inSender.get("value"));
        }
    }); 
    
    new MyControl({
        fit: true, 
        model: new enyo.Model({name: "Bob", value:20})
    }).renderInto(document.body);
});