           newVal = scope.volume.volumeNbr + 1
           # Do the update only if the new value does not go above the number of
           # volumes in the time series.
-          if newVal <= timeSeriesLength
+          if newVal <= scope.timeSeries.image.volumes.size
             sliderTimeSeries.noUiSlider.set(newVal)
             updateImage(newVal)
 

        # TODO - Add tooltip to show current slider value.
        #
        noUiSlider.create sliderTimeSeries,
          start: [ volumeNbr ]
          step: 1
          range:
            'min': 1
            'max': timeSeriesLength
          pips:
            mode: 'positions'
            values: [0, 100]
            density: 4

        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.

            newVal = Math.floor sliderAxialPlane.noUiSlider.get()
            updateImage(newVal)

          updateImage = (sliceNbr) ->
            # Update the image with the new slice number, which corresponds to
            # new slider position.
            scope.$apply ->
              scope.slice.sliceNbr = sliceNbr

          # When the back button is clicked, reduce the slider position by one
          # and update the image.
          sliderAxialPlaneBack.addEventListener 'click', ->
            newVal = scope.slice.sliceNbr - 1
            # Do the update only if the new value does not fall below 1.
            if newVal >= 1
              sliderAxialPlane.noUiSlider.set(newVal)
              updateImage(newVal)

          # When the forward button is clicked, increase the slider position by
          # one and update the image.
          sliderAxialPlaneFwd.addEventListener 'click', ->
            newVal = scope.slice.sliceNbr + 1
            # Do the update only if the new value does not go above the number of
            # slices in the image axial plane.
            if newVal <= scope.timeSeries.image.slices.size
              sliderAxialPlane.noUiSlider.set(newVal)
              updateImage(newVal)


    directives.directive 'qiSliderTimeSeries', ->
