     @ui.dateRangeInput.daterangepicker(
       locale:
         format: 'L'
-      startDate: moment().subtract(3, 'months').format("L")
+      startDate: moment().subtract(@DEFAULT_TIME_PERIOD_TIME, @DEFAULT_TIME_PERIOD_UNIT).format("L")
       endDate: moment().format("L")
       opens: "left"
     (start, end, label) =>
+      @fetchData(start.valueOf(), end.valueOf())
       @paintGraph()
     )
     return
 
 
-  initializeRangeSlider : ->
-
-    RangeSlider.create(@ui.rangeSliderInput[0],
-      start: [0, 80]
-      connect: true
-      step: 1
-      range:
-        min: 0
-        max: 100 #TODO: Find min/max in data
-    )
-
-    @ui.rangeSliderInput[0].noUiSlider.on('update', (values, handle) =>
-      @ui.rangeSliderLabel1[0].innerHTML = "#{Math.round(+values[0])}h";
-      @ui.rangeSliderLabel2[0].innerHTML = "#{Math.round((+values[0] + +values[1]) / 2)}h";
-      @ui.rangeSliderLabel3[0].innerHTML = "#{Math.round(+values[1])}h";
-      @paintGraphDebounced()
-    )
-    return
+  renderRangeSlider : ->
+
+    sliderEl = @ui.rangeSliderInput[0]
+
+    @fetchPromise.done( =>
+      minMaxHours = @getMinMaxHours()
+
+      # Destroy existing instance to reconfigure
+      if sliderEl.noUiSlider
+        sliderEl.noUiSlider.destroy()
+
+      RangeSlider.create(sliderEl,
+        start: [
+          Math.max(minMaxHours.min, @chosenMinHours)
+          Math.min(minMaxHours.max, @chosenMaxHours)
+        ]
+        connect: true
+        step: 1
+        margin: 1
+        range: minMaxHours
+      )
+
+      sliderEl.noUiSlider.on('update', (values, handle) =>
+        @chosenMinHours = Math.round(+values[0])
+        @chosenMaxHours = Math.round(+values[1])
+        @ui.rangeSliderLabel1[0].innerHTML = "#{@chosenMinHours}h";
+        @ui.rangeSliderLabel2[0].innerHTML = "#{Utils.roundTo((+values[0] + +values[1]) / 2, 1)}h";
+        @ui.rangeSliderLabel3[0].innerHTML = "#{@chosenMaxHours}h";
+        @paintGraphDebounced()
+      )
+    )
 
 
   paintGraphDebounced : ->


      svgTaskTypeEdges = userInfos.map( (userInfo) =>
        { user, taskTypes } = userInfo
        taskTypes.map( (taskType) => @edge(user.name, taskType.summary))
      ).join(";")

      svgFutureTaskTypesEdges  = "edge [ color=blue ];"
      svgFutureTaskTypesEdges += userInfos.map( (userInfo) =>
        { user, futureTaskType } = userInfo
        if(futureTaskType)
          @edge(user.name, futureTaskType.summary)
      ).join(";")


    if @doDrawProjects()
      svgProjectEdges = userInfos.map( (userInfo) =>
        { user, projects } = userInfo
        projects.map( (project) => @edge(user.name, project.name))
      ).join(";")



    $(@ui.projectsCheckbox).prop("checked")


  doDrawUser : (user) ->

    return @chosenMinHours <= user.workingHours <= @chosenMaxHours


  getSVG : ->

    @fetchPromise.then( =>

      { userInfos, taskTypes, projects } = @model.attributes
      # move workingTime to user object and convert to hours
      userInfos.map( (userInfo) => userInfo.user.workingHours = Utils.roundTo(userInfo.workingTime / @MS_PER_HOUR, 2) )
      # extract users and add full names
      @users = _.pluck(userInfos, "user")
      @users.map( (user) -> user.name = user.firstName + " " + user.lastName )
