Edit in JSFiddle

// STATE
var colour = [0, 0, 0];
var _history = [colour];

// ELEMENTS
var colour_fields = [],
    inputs = [],
    reds = [],
    greens = [],
    blues = [],
    red_numbers = [],
    green_numbers = [],
    blue_numbers = [],
    active_dragging = null,
    history_element;

function back_in_time() {
    if (_history.length < 2) {
        return;
    }
    _history.pop();
    colour = _history[_history.length - 1];
    redraw();
}

function start_dragging(element) {
    active_dragging = element;
}

function end_dragging() {
    active_dragging = null;
}

function changed(element) {    
    switch (element.className) {
        case "red":
             colour = [
                element.value,
                colour[1],
                colour[2]
            ];
            break;
        case "blue":
             colour = [
                colour[0],
                colour[1],
                element.value
            ];
            break;
        case "green":
             colour = [
                colour[0],
                element.value,
                colour[2]
            ];
            break;
    }
    update_history();
    redraw();
}

function dragging() {
    if (active_dragging === null) {
        return;
    }
    changed(active_dragging);
}

function redraw() {
    colour_fields.forEach(function (e) {
        var new_value = "rgb(" + colour[0] + ", " + colour[1] + ", " + colour[2] + ")";
        if (e.style.backgroundColor !== new_value) {
            e.style.backgroundColor = new_value;
        }
    });
    reds.forEach(function (e) {
        if (e.value !== colour[0]) {
            e.value = colour[0];
        }
    });
    greens.forEach(function (e) {
        if (e.value !== colour[1]) {
            e.value = colour[1];
        }
    });
    blues.forEach(function (e) {
        if (e.value !== colour[2]) {
            e.value = colour[2];
        }
    });
    red_numbers.forEach(function (e) {
        var string_value = colour[0].toString();
        if (string_value !== e.innerHTML) {
            e.innerHTML = colour[0];
        }
    });
    green_numbers.forEach(function (e) {
        var string_value = colour[1].toString();
        if (string_value !== e.innerHTML) {
            e.innerHTML = colour[1];
        }
    });
    blue_numbers.forEach(function (e) {
        var string_value = colour[2].toString();
        if (string_value !== e.innerHTML) {
            e.innerHTML = colour[2];
        }
    });
    history_element.innerHTML = "";
    _history.forEach(function (e) {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(e));
        history_element.appendChild(li);
    });
}

function update_history() {
    var last = _history[_history.length - 1];
    if (last[0] === colour[0] && last[1] === colour[1] && last[2] === colour[2]) {
        return;
    }
    _history.push(colour);
}

function reset() {
    colour = [0, 0, 0];
    update_history();
    redraw();
}

function turnObjToArray(obj) {
  return [].map.call(obj, function(element) {
    return element;
  });
}

function setup() {
    colour_fields = turnObjToArray(document.getElementsByClassName("colour"));
    reds = turnObjToArray(document.getElementsByClassName("red"));
    greens = turnObjToArray(document.getElementsByClassName("green"));
    blues = turnObjToArray(document.getElementsByClassName("blue"));
    red_numbers = turnObjToArray(document.getElementsByClassName("red_number"));
    green_numbers = turnObjToArray(document.getElementsByClassName("green_number"));
    blue_numbers = turnObjToArray(document.getElementsByClassName("blue_number"));
    history_element = document.getElementById("history");
    window.addEventListener("mouseup", end_dragging);
    window.addEventListener("mousemove", dragging);
    redraw();
}

window.addEventListener("load", setup);

<div>
    <div style="width: 300px; height: 200px" class="colour"></div>
    <div>
        <input type="range" min="0" max="255" class="red" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="red_number"></span>
    </div>
    <div>
        <input type="range" min="0" max="255" class="green" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="green_number"></span>
    </div>
    <div>
        <input type="range" min="0" max="255" class="blue" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="blue_number"></span>
    </div>
    <div>
        <input type="button" value="Reset" onclick="reset();" />
    </div>
</div>

<div>
    <div style="width: 300px; height: 200px" class="colour"></div>
    <div>
        <input type="range" min="0" max="255" class="red" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="red_number"></span>
    </div>
    <div>
        <input type="range" min="0" max="255" class="green" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="green_number"></span>
    </div>
    <div>
        <input type="range" min="0" max="255" class="blue" onclick="changed(this);" onmousedown="start_dragging(this);" />
        <span class="blue_number"></span>
    </div>
    <div>
        <input type="button" value="Reset" onclick="reset();" />
    </div>
</div>
<div>
    <input type="button" value="Back in time" onclick="back_in_time();" />
    <ol id="history"></ol>
</div>