         # TODO - Add tooltip to show current slider value.
         #
         noUiSlider.create sliderTimeSeries,
-          start: [ volumeNbr ]
+          start: [ scope.volume.volumeNbr ]
           step: 1
           range:
             'min': 1
-            'max': timeSeriesLength
+            'max': scope.timeSeries.image.volumes.size
           pips:
             mode: 'positions'
             values: [0, 100]
             density: 4
+
+        # When the slider is dragged, get the new slider position and update
+        # the image.
+        sliderTimeSeries.noUiSlider.on 'slide', ->
+          newVal = Math.floor sliderTimeSeries.noUiSlider.get()
+          updateImage(newVal)
 
         updateImage = (volumeNbr) ->
           # Update the image with the new volume number, which corresponds to
           # new slider position.
           scope.$apply ->
             scope.volume.volumeNbr = volumeNbr
-
-        # # When the slider is dragged, get the new slider position and update
-        # # the image.
-        sliderTimeSeries.noUiSlider.on 'slide', ->
-          newVal = Math.floor sliderTimeSeries.noUiSlider.get()
-          updateImage(newVal)
 
         # When the back button is clicked, reduce the slider position by one
         # and update the image.

        # TODO - Add tooltip to show current slider value.
        #
        scope.timeSeries.image.loader.callback = ->
          noUiSlider.create sliderAxialPlane,
            start: [ scope.slice.sliceNbr ]
            step: 1

        sliderTimeSeriesBack = document.getElementById('qi-slider-time-series-back')
        sliderTimeSeriesFwd = document.getElementById('qi-slider-time-series-fwd')

        # Configure the slider.
        #
        # FIXME - The time series slider created is called twice,
