Cacher is the code snippet organizer for pro developers

function __slider() {
    var refference = this;

    this.onMouseMoveListeners = [];
    this.mouseFlag = false;
    this.min = 0;
    this.max = 100;
    this.buttonThing = $("<div>")
        .css({
            width: "32px",
            height: "32px",
            background: "#ff0000",
            position: "absolute",
            top: "0px",
            left: "0px",
            opacity: 1,
            lineHeight: "32px",
            textAlign: "center"
        })
        .addClass("inner")
        .append("S");
    this.htmlElement = $("<div>")
        .css({
            width: "100%",
            height: "32px",
            background: "#000000",
            position: "relative",
            opacity: "0.80",
            display: "block"
        })
        .addClass("wrapper")
        .append(this.buttonThing);

    $(this.htmlElement).on("mousemove", function (event) {
        if ($(event.target).attr("data-mouseflag") == "true") {
            var currentElement = $(event.target);
            var differ = $(event.target).attr("data-offset");
            var max = ($(currentElement.parent()[0]).width() - currentElement.width());
            var relativeMousePosition = event.clientX - getElementOffSetFromParent(event.target);
            var newPosition = relativeMousePosition > differ ?
                relativeMousePosition - differ < max ?
                relativeMousePosition - differ : max : 0;
            $(event.target).css({
                "left": newPosition + "px"
            });

            var currentValue = refference.getValue();
            $.each(refference.onMouseMoveListeners, function (index, element) {
                element(currentValue)
            })
        }
    });
    $(this.buttonThing)
        .on("mousedown", function (event) {
            var target = $(event.target);
            target.attr("data-mouseflag", true);
            target.attr("data-offset", parseInt(event.clientX - getElementOffSetFromBody(event.target)));
            console.log(event.clientX - getElementOffSetFromBody(event.target))
        })
        .on("mouseup mouseout mouseleave", function (event) {
            $(event.target).attr("data-mouseflag", false)
        });

    this.getValue = function () {
        return refference.getPercent()*(Math.abs(refference.max - refference.min)/100) + refference.min
    };

    this.getPercent = function () {
        var currentElement = $(this.buttonThing);
        return (parseInt(currentElement.css("left")) / ($(currentElement.parent()[0]).width() - currentElement.width())) * 100;
    };

    this.setColor = function (color) {
        $(this.buttonThing).css({
            background: color
        })
    };
    this.setText = function (text) {
        $(this.buttonThing)
            .html(text);
        console.log($(this.htmlElement)
            .filter(".inner"))
    };
    this.addMouseMoveListener = function (func) {
        if (typeof func === 'function') {
            refference.onMouseMoveListeners.push(func);
            return true
        } else return false;
    };
    this.getHTML = function () {
        return this.htmlElement;
    };
    var getElementOffSetFromBody = function (htmlElement) {
        var bodyRect = document.body.getBoundingClientRect(),
            elemRect = htmlElement.getBoundingClientRect();
        return elemRect.left - bodyRect.left;
    };
    var getElementOffSetFromParent = function (htmlElement) {
        var parentRect = $(htmlElement).parent()[0].getBoundingClientRect(),
            bodyRect = document.body.getBoundingClientRect();
        return parentRect.left - bodyRect.left;
    }
}

var lightsControls = {
    red: {
        value: 0,
        name: "R",
        color: "#FF0000",
        min: 0,
        max: 255
    },
    green: {
        value: 0,
        name: "G",
        color: "#00FF00",
        min: 0,
        max: 255
    },
    blue: {
        value: 0,
        name: "B",
        color: "#0000FF",
        min: 0,
        max: 255
    },
    intensity: {
        value: 0,
        name: "I",
        color: "#cccccc",
        min: 0,
        max: 100
    },
    offset: {
        value: 0,
        name: "X",
        color: "#FFFFFF",
        min: 32,
        max: 196
    },
    height: {
        value: 0,
        name: "Y",
        color: "#bbbbbb",
        min: 32,
        max: 196
    }
};

function generateSliders(){
    var keys = Object.keys(lightsControls);

    for(var i=0; i < keys.length; i++) {
        var suwak = new __slider();

        var key = lightsControls[keys[i]];
        suwak.setColor(lightsControls[keys[i]].color);
        suwak.setText(lightsControls[keys[i]].name);
        suwak.min = lightsControls[keys[i]].min;
        suwak.max = lightsControls[keys[i]].max;

        $("#suwaki").append($("<li>").append(suwak.getHTML()));

        (function(key){
           suwak.addMouseMoveListener(function(value){
            lightsControls[key].value = value;
           })
        })(key)
    }
}