components.js

 var myApp = window.myApp || {};
 myApp.lib = myApp.lib || {};

 myApp.lib.log = function() {
 };

 myApp.myModule = (function (window, $) {

     //superclass
     function AbstractSlider(config) {
         this.$view = config.view;
         // expand sliderA and B
         this.$view.append('<div class="track"></div><div class="thumb"></div>');
         // finds track and thumb
         this.$track = this.$view.find('.track');
         this.$thumb = this.$view.find('.thumb');
         //checks config
         this.value = (isNaN(config.value) ? 0 : config.value);
         this.minValue = (isNaN(config.min) ? 0 : config.min);
         this.maxValue = (isNaN(config.max) ? 100 : config.max);
         // width of thumb and track
         this.trackWidth = this.$track.width();
         this.thumbWidth = this.$thumb.width();
         // offset of the track
         this.trackLeft = this.$track.offset().left;

         // this = $view Object, also beide slider aus dem html
         this.$view.on('mousedown', this.onMouseDownHandler.bind(this));

         //init value

         //temporarily api
         this.$view.data('interface', {
             setValue: this.setValue.bind(this),
             getValue: this.getValue.bind(this)
         });

         this.setValue(this.value);

     };


     // constructor function for Hslider
     function Hslider(config) {

         //erben von AbstractSlider
         AbstractSlider.call(this, config);
     };

     Hslider.prototype.setValue = function setValue(newValue) {
         this.value = newValue;
         // position update

         this.$thumb.css('left', this.valueToPosition(newValue));
         this.$view.trigger('change');
     };

     Hslider.prototype.onMouseDownHandler = function onMouseDownHandler(e) {
         this.$view.addClass('active');
         var dragOffsetX = 0;
         if (e.target == this.$thumb[0]) {
             //thumb
             dragOffsetX = e.pageX - this.$thumb.offset().left;
         } else {
             //track
             dragOffsetX = this.thumbWidth / 2;
             this.setValueByPageX(e.pageX, dragOffsetX);
         }

         var that = this; //now we save this instead of bind
         $(window).on('mousemove', function (e) {
             that.setValueByPageX(e.pageX, dragOffsetX);
             e.preventDefault();
         });

         $(window).on('mouseup', function (e) {
             $(window).off('mousemove').off('mouseup');
             that.$view.removeClass('active');
             e.preventDefault();
         });
         e.preventDefault(); //otherwise text cursor
     };

     Hslider.prototype.getValue = function getValue() {
         return this.value;
     };

     Hslider.prototype.valueToPosition = function valueToPosition(value) {
         position = (value - this.minValue) / (this.maxValue - this.minValue) * (this.trackWidth - this.thumbWidth); //our thumb position
         return position;
     };

     Hslider.prototype.positionToValue = function positionToValue(position) {
         return position / (this.trackWidth - this.thumbWidth) * (this.maxValue - this.minValue) + this.minValue;
     };

     Hslider.prototype.setValueByPageX = function setValueByPageX(pageX, dragOffsetX) {
         //min: 0
         //max: this.trackWidth - thumbWidth
         var position = Math.max(0, Math.min(pageX - this.trackLeft - dragOffsetX, this.trackWidth - this.thumbWidth));
         this.setValue(this.positionToValue(position));
     };



 //public interface für Rückgabe der einzelnen functions
 return {
     Hslider: Hslider


 }

 })(window, jQuery);

main.js

var myApp = window.myApp || {};
myApp.lib = myApp.lib || {};

myApp.lib.log = function () {
};


//iterates over the jquery object and execute a function for each match
$('.slider').each(function () {

    var $slider = $(this);
    // new slider from constructor
    var slider = new myApp.myModule.Hslider({
        view: $slider,
        min: $slider.data('min'),
        max: $slider.data('max'),
        value: parseFloat($slider.attr('data-value'))
    });


    //value im label per change event
    $('#sliderA').change(function(){
        document.getElementById('labelA').innerHTML = 'value: ' + $(this).data('interface').getValue();
    });

    $('#sliderB').change(function(){
        document.getElementById('labelB').innerHTML = 'value: ' + $(this).data('interface').getValue();
    });
});


// ----- testing  -----

(function () {

    $('.shortcuts > a').on('click', function () {
        var sliderId = '#slider' + $(this).parent().attr('id').replace('shortcuts', '');
        $(sliderId).data('interface').setValue(parseFloat($(this).text()));
    });

    setInterval(function () {
        //console.log('slider values: ');
        $('.slider').each(function () {
            //console.log('value: ' + $(this).data('interface').getValue());
        });
    }, 3000);

})();