JSFiddle - React, Tailwind, and code Playground

by lynnaloo

CSS

.buttons {
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
}

.slider, .input-decorator {
    width: 250px;
}

.slider {
    margin: 15px 10px;
}

.input-field, .input-decorator {
    width: 100px;
}

.input-decorator {
    width: 150px;
}

JavaScript

enyo.kind({
    name: "NumberSpinner",
    published: {
        showSlider: true,
        maxValue: 100
    },
    components: [
        {kind: "FittableColumns", components: [
            //{name: "label", content: "Spinner:"},
            {kind: "FittableRows", components: [
            {kind: "onyx.Slider", name: "slider", showStripes: true, onChange:"sliderChanged",
                 classes: "slider"},
                {kind: "onyx.InputDecorator", classes: "input-decorator", classes: "input-decorator", components: [
                {kind: "onyx.Input", name: "input", onchange:"inputChanged",
                 classes: "input-field"},
                {kind: "FittableRows", components: [
                    // TODO: replace with font-awesome
                    {kind: "onyx.Button", classes: "buttons", content:"+",
                        ontap:"increase"},
                    {kind: "onyx.Button", classes: "buttons", content:"-",
                        ontap:"decrease"} 
                ]}    
            ]}
            ]}    
        ]}     
    ],
    create: function () {
        this.inherited(arguments);
        this.$.slider.setShowing(this.showSlider);
    },
	sliderChanged: function(inSender, inEvent) {
        this.$.input.setValue(Math.round(inSender.getValue()));
	},
    decrease: function (inSender, inEvent) {
        var value = Math.max(parseInt(this.$.input.getValue() || 0, 10) - 1, 0);
        this.$.input.setValue(value);
        this.setSliderValue();
    },
    increase: function (inSender, inEvent) {
        var value = Math.min(parseInt(this.$.input.getValue() || 0, 10) + 1, this.getMaxValue());
        this.$.input.setValue(value);
        this.setSliderValue();
    },
    setSliderValue: function () {
        this.$.slider.setValue(this.$.input.getValue());
    },
    inputChanged: function (inSender, inEvent) {
        this.setSliderValue();
    }
});
var app = new NumberSpinner();
app.renderInto(document.body);