     @loadSubject(sampleData[0])
 
     console.log @canvasGraph.largestX
-    @el.find("#scale-slider").attr "max", @canvasGraph.largestX
+    @el.find("#scale-slider").attr "max", @canvasGraph.largestX - @zoomRange
     @el.find("#scale-slider").attr "min", @canvasGraph.smallestX
 
     $(document).on 'mark-change', => @updateButtons()

    @canvasGraph.enableMarking()

  onChangeScaleSlider: ->
    @zoomRange = 15
    @focusCenter = +@el.find('#scale-slider').val() + @zoomRange/2
    
    xMin = @focusCenter-@zoomRange/2
    xMax = @focusCenter+@zoomRange/2

    return unless @isZoomed
    @canvasGraph.plotPoints(xMin,xMax)

    console.log "data center: ", @focusCenter
    # console.log 'data largestX : ', @canvasGraph.largestX


  constructor: ->
    super
    @zoomRange = 15

    isZoomed: false
    ifFaved: false
    @scaleSlider = new FauxRangeInput('#scale-slider')
