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>Highlight Tool</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) {
        console.log(num, start, end);
                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 returnValue (value) { return value; }

// Simple functions that return a value, used in the clamping function
var negInfinity = _.partial(returnValue, -Infinity);
var infinity = _.partial(returnValue, Infinity);

// Create functions that simply get the value of a specific element as an int
//var getValue = _.compose(valueToInt, getElementValue);

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

var HighlightModel = Backbone.Model.extend({
    defaults: {
        min: 0,
        max: 20,
        start: 3,
        end: 6
    }
});

var HighlightView = Backbone.View.extend({
    tagName: "div",
    className : "highlighter",
    initialize: function () { 
        this.template = _.template( $("#highlight_template").html(), {} );
        this.render = _.bind(this.render, this); 
        this.render();
    },
    events: {
        "change input.min": "minEventHandler",
        "change input.max": "maxEventHandler",
        "change input.hiliteMin": "highlightMinEventHandler",
        "change input.hiliteMax": "highlightMaxEventHandler"
    },
    render: function () {
        this.$el.empty();
        var modelObj = this.model.toJSON();
        modelObj.range = _.range(modelObj.min, modelObj.max + 1);
        this.$el.html(this.template(modelObj));
    },
    minEventHandler:  function (event) {
        var min = 0;
       ...