JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script type="text/template" id="highlight_template">
    <h3><%=title%></h3>
    <div><label for="min">Min: </label><input type="range" class="min" value="<%=min%>" min="0" step="1" max="20"/></div>
    <div><label for="max">Max: </label><input type="range" class="max" value="<%=max%>"  min="0" step="1" max="20"/></div>
    <div><label for="hiliteMin">Hilite Min: </label><input type="range" class="hiliteMin" value="<%=start%>" min="0" step="1" max="20" /></div>
    <div><label for="hiliteMax">Hilite Max: </label><input type="range" class="hiliteMax" value="<%=end%>" min="0" step="1" max="20" /></div>
    <div class="output">
        <%
            _.each(range, function (num) {
                if (num >= start && num <= end) {
                %>
                    <span class="num highlight"><%=num%></span>
                <%
                 } else {
                %>
                    <span class="num"><%=num%></span>
                <%
                 }
          });
        %>
    </div>
</script>

CSS

label {
    display: inline-block;
    width: 80px;
}
.highlighter .num { padding: 2px; }
.highlighter .highlight { background-color: red; }

JavaScript

// These functions all do *one* simple thing.
// That way we can _.compose them later in different fun ways
function getElementFromEvent (event) {
    return event.currentTarget;
}

function getElementValue (elem) {
    return elem.value;
}

function setElementValue (elem, value) {
    return elem.value = value;
}

function setModelValue (model, value) {
    return elem.value = value;
}

function valueToInt (value) {
    return parseInt(value, 10);
}

function clampToMinMax (min, max, value) {
    return Math.max(min, Math.min(value, max));
}

function outsideOfMinMax (min, max, value) {
    return value < min || value > max;
}

// Create function that gets a value from an event as a int
var getIntFromEvent =  _.compose(valueToInt, getElementValue, getElementFromEvent);

var HighlightModel = Backbone.Model.extend({
    validate: function(attrs, options) {
        var clamped = false;
        if (outsideOfMinMax(0, this.get('start'), attrs.min)) {
            clamped = true;
            this.set('min', clampToMinMax(0, this.get('start'), attrs.min));
        }
        if (outsideOfMinMax(this.get('end'), 20, attrs.max)) {
            clamped = true;
            this.set('max', clampToMinMax(this.get('end'), 20, attrs.max));
        }
        if (outsideOfMinMax(this.get('min'), this.get('end'), attrs.start)) {
            clamped = true;
            this.set('start', clampToMinMax(this.get('min'), this.get('end'), attrs.start));
        }
        if (outsideOfMinMax(this.get('start'), this.get('max'), attrs.end)) {
            clamped = true;
            this.set('end', clampToMinMax(this.get('start'), this.get('max'), attrs.end));
        }
        if (clamped) return 'clamped!';
    },
    defaults: {
        title: 'Highlight Toy',
        min: 0,
        max: 20,
        start: 3,
        end: 6
    }
});

var HighlightView = Backbone.View.extend({
    tagName: "div",
    className : "highlighter",
    initialize: function () { 
        this.template =...