JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<li class="control number">
    <label for="myNumber">Number:</label>
    <input id="myNumber" name="myNumber" type="text" min="0" max="100" step="0.1" value="5.0">
</li>

CSS

.control.number label,
.control.number input {
    display:block;
}

.control.number input {
    float:left;
}

.control.number a {
    border:1px solid #000;
    color:#fff;
    cursor:pointer;
    display:table;
    height:10px;
    line-height:.5;
    margin-bottom:1px;
    position:relative;
    width:10px;
}
    
.control.number .up {
    background:#222 url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px;
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px, -webkit-gradient(linear, left bottom, left top, from(#111), color-stop(0.50, #000), color-stop(0.52, #222), color-stop(0.76, #444));
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px, -webkit-linear-gradient(center bottom, #111 0%, #000 50%, #222 52%, #444 76%);
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px, -moz-linear-gradient(center bottom, #111 0%, #000 50%, #222 52%, #444 76%);
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px, -ms-linear-gradient(center bottom, #111 0%, #000 50%, #222 52%, #444 76%);
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px, -o-linear-gradient(center bottom, #111 0%, #000 50%, #222 52%, #444 76%);
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px, linear-gradient(center bottom, #111 0%, #000 50%, #222 52%, #444 76%);
}

.control.number .down {
    background:#222 url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px;
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px, -webkit-gradient(linear, left bottom, left top, from(#111), color-stop(0.50, #000), color-stop(0.52, #222), color-stop(0.76, #444));
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat -189px -333px, -webkit-linear-gradient(center bottom, #111 0%, #000 50%, #222 52%, #444 76%);
    background:url('http://jsfiddle.net/img/sprites.png') no-repeat...

JavaScript

(function () {
    var up, down,
        max, min, step, 
        currentVal, newVal,
        $input, $li, $target;

    var calculateNewValue = function (operation) {
        switch(operation) {
        case "add":
            newVal = currentVal + step;

            validate(newVal);

            newVal = (newVal >= min) ? newVal : min;
            newVal = (newVal <= max) ? newVal : max;
            break;
        case "subtract":
            newVal = currentVal - step;

            validate(newVal);

            newVal = (newVal <= max) ? newVal : max;
            newVal = (newVal >= min) ? newVal : min;
            break;
        default:
            newVal = parseFloat($input.val());

            validate(newVal);

            newVal = (newVal <= max) ? newVal : max;
            newVal = (newVal >= min) ? newVal : min;
            break;
        }
        currentVal = parseInt(newVal.toFixed(roundTo(currentVal)), 10);
        console.log("typeof currentVal", typeof currentVal);
        $input.val(currentVal);
    };
    
    var processClick = function (el) {
        var operation = $(el).hasClass('up') ? 'add' : 'subtract';
        calculateNewValue(operation);
    };

    var roundTo = function (val) {
        return Math.max(
                (step.toString().split('.')[1] || '').length,
                (val.toString().split('.')[1] || '').length);
    };

    var validate = function (val) {
        if (isNaN(val)) {
            $input.addClass('invalid');
            $input.val(currentVal);
            throw new TypeError('value must be a number');
        } else {
            $input.removeClass('invalid');
        }
    };
    
$('.control.number').each(function() {
    up = '<a class="up"/>';
    down= '<a class="down"/>';
    $li = $(this);
    $input = $('input', this);
    
    max = parseFloat($input.attr('max'));
    min = parseFloat($input.attr('min'));
    step = parseFloat($input.attr('step'));
    currentVal =...