docs: function Slider (min, max, step, value, onChange, onChangeFinished, vertical) {
    if (min === undefined) min = 0;
    if (max === undefined) max = 100;
    if (step === undefined) step = 0.5;
    if (value === undefined) value = 10;
    if (vertical === undefined) vertical = false;
  
    // we first inject the css into the dom
    injectCss(___css, ___styleId);
  
    /**
     * Callback function called when slider value changes
     * @type {function} 
     * @public
     */
    this.onChange = onChange;
  
    /**
     * Callback function called when user releases the click after changing the 
     * slider value 
     * @type {function} 
     * @public
     */
    this.onChangeFinished = onChangeFinished;
  
    this.min = min;
    this.max = max;
    this.step = step;
    this.value = value;
  
    /**
     * Contains the elements that can be added to the DOM of the document 
     * @type {HTMLElement}
     * @public
     */
    this.dom = null;
  
    /**
     * Set to true if the element is clicked
     * @type {boolean}
     * @private
     */
    this.clicked = false;
  
    /**
     * Left offset in pixels of the slide container 
     * @type {number}
     * @private
     */
    this.x = 0;
  
    /**
     * Width of the slider container, in px
     * @type {number}
     * @private
     */
    this.width = 0;
  
    /**
     * if the slider is vertical or not 
     * @type {boolean}
     * @private
     */
    this.vertical = vertical;
  
    this.onChange = onChange;
    this.onChangeFinished = onChangeFinished;
  
    this.container = document.createElement("div");
    this.container.classList.add("creenv-slider-container");
    if (vertical) this.container.classList.add("vertical");
  
    this.progress = document.createElement("div");
    this.progress.classList.add("creenv-slider-progress");
  
    this.cursor = document.createElement("div");
    this.cursor.classList.add("creenv-slider-cursor");
  
    this.container.appendChild(this.progress);
    this.container.appendChild(this.cursor);
    this.dom = this.container;
  
    var that = this;
  
    this.updateGraphics();
  
    this.dom.addEventListener("mousedown", function(event) {
      // small optimisation, we consider that sliders won't move during the slide process
      var rect = that.dom.getBoundingClientRect();
      that.x = that.vertical ? rect.y : rect.x;
      that.width = that.vertical ? rect.height : rect.width;
  
      that.clicked = true;
      that.updateValue(that.vertical ? event.pageY : event.pageX);
    });
  
    document.addEventListener("mouseup", function() {
      if (that.clicked) {
        that.clicked = false;
        (that.onChangeFinished || ___noop)(that.value);
      }
    });
  
    document.addEventListener("mousemove", function (event) {
      if (that.clicked) {
        that.updateValue(that.vertical ? event.pageY : event.pageX);
      }
    });
  }