class JSRange {
  constructor (el, options) {
    this._updateObject = this._update

    this.options = options
    this.selected = {
      min: this.options.min,
      max: this.options.max
    }

    this._createBody(el)
    this.update()
  }

  // Propably we want to update everything
  update () {
    this._update.all()
  }

  set (hash = {}) {
    if (hash.min) {
      this.selected.min = hash.min
    }

    if (hash.max) {
      this.selected.max = hash.max
    }

    this.update()
  }
 
  _createBody (el) {
    this.body = {}

    this.body.parent = document.querySelector(el)
    this.body.parent.classList.add('jsr')

    this.body.rail = document.createElement('div')
    this.body.rail.classList.add('jsr_rail')

    this.body.sliders = {}
    this.body.sliders.min = document.createElement('div')
    this.body.sliders.min.classList.add('jsr_slider', 'jsr_slider--min')
    this.body.sliders.max = document.createElement('div')
    this.body.sliders.max.classList.add('jsr_slider', 'jsr_slider--max')

    this.body.info = {}
    this.body.info.min = document.createElement('span')
    this.body.info.min.classList.add('jsr_info', 'jsr_info--min')
    this.body.info.max = document.createElement('span')
    this.body.info.max.classList.add('jsr_info', 'jsr_info--max')
    this.body.info.actualMin = document.createElement('span')
    this.body.info.actualMin.classList.add('jsr_info', 'jsr_info--actualMin')
    this.body.info.actualMax = document.createElement('span')
    this.body.info.actualMax.classList.add('jsr_info', 'jsr_info--actualMax')

    let elements = [
      this.body.rail,
      this.body.sliders.min,
      this.body.sliders.max,
      this.body.info.min,
      this.body.info.max,
      this.body.info.actualMin,
      this.body.info.actualMax
    ]

    elements.forEach((element) => {
      this.body.parent.appendChild(element)
    })
  }

  // _update returns all methods available to use to update things
  // it tries to use the buffering-variable (_updateObject)
  get _update () {
    var _this = this;
    return _this._updateObject || {
      all: function () {
        this.rail()
        this.info()
      },
      rail: function () {
        // Update rail color
        let railStart = _this.selected.min / _this.options.max * 100
        let railEnd = _this.selected.max / _this.options.max * 100
        _this._setRail(railStart, railEnd)
      },
      info: function () {

      }
    }
  }
  // Sets colored part of rail
  // Expects percentages without % sign
  _setRail (start, end) {
    this.body.rail.style.backgroundPosition = `${start}% 0`
    this.body.rail.style.backgroundSize = `${end - start}% 100%`
  }
}
@@ -2003,16 +2003,48 @@
 eObject)
+ to not recreate this big object
 %0A  get _
@@ -2123,65 +2123,170 @@
     
-all: function () %7B%0A        this.rail()%0A        this.info(
+_toUpdate: %5B'rail', 'info'%5D,%0A%0A      all: function () %7B%0A        this._toUpdate.forEach((item) =%3E %7B%0A          this%5Bitem%5D() // Call certain update function%0A        %7D
 )%0A  
@@ -2288,24 +2288,25 @@
 %7D)%0A      %7D,%0A
+%0A
       rail: 
@@ -2307,32 +2307,84 @@
 rail: function (
+ min = _this.selected.min, max = _this.selected.max 
 ) %7B%0A        // U
@@ -2416,35 +2416,16 @@
 let 
-railS
+s
 tart = 
-_this.selected.
 min 
@@ -2466,33 +2466,14 @@
 let 
-railEnd = _this.selected.
+end = 
 max 
@@ -2502,105 +2502,15 @@
 100%0A
+%0A
       
-  _this._setRail(railStart, railEnd)%0A      %7D,%0A      info: function () %7B%0A%0A      %7D%0A    %7D%0A  %7D%0A
   //
@@ -2536,16 +2536,22 @@
 of rail%0A
+      
   // Exp
@@ -2588,36 +2588,15 @@
 n%0A  
-_setRail (start, end) %7B%0A
+  
     
+_
 this
@@ -2647,24 +2647,29 @@
 rt%7D%25 0%60%0A    
+    _
 this.body.ra
@@ -2717,13 +2717,72 @@
 %25 100%25%60%0A
+      %7D,%0A%0A      info: function () %7B%0A        %0A      %7D%0A    %7D%0A
   %7D%0A%7D

Move rail color update to new update object