 
         # Configure the slider.
         #
-        # TODO - Obtain the range max from the scope.timeSeries.image.volumes.size or
-        #    scope.timeSeries.image.slices.size property. Pass this value as an argument
-        #    to the refactored service function. Note: this requires that the image is
-        #    loaded. Therefore, the slider compile must be coordinated with the image
-        #    display compile. The slider create must then be deferred as a callback
-        #    after load completes.
-        #
         # TODO - Add tooltip to show current slider value.
         #
         scope.timeSeries.image.loader.callback = ->
-          # Obtain the range max from the scope.timeSeries.image.volumes.size
+          # Obtain the range max from the scope.timeSeries.image.slices.size
           # property. This requires that the image is loaded. Therefore, the
           # slider compile must be coordinated with the image display compile.
           # The slider create must then be deferred as a callback after load

    # TODO - Refactor this and the following directive into one directive
    #   which calls the service function.
    #
    # TODO - Make a parent directive named qi-axial-select
    #   (resp. qi-volume-select) that contains the buttons and the slider.
    #   The parent manages the state and image display. The buttons and slider

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

        # Check for the existence of the time series slider object to prevent
        # the create function from being called twice, which may result from an
        # Angular digest anomaly.
        if !sliderTimeSeries.noUiSlider
          # Configure the slider.
          #
          # TODO - Add tooltip to show current slider value.
          #
          noUiSlider.create sliderTimeSeries,
            start: [ scope.volume.volumeNbr ]
            step: 1
            range:
              'min': 1
              '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 back button is clicked, reduce the slider position by one
          # and update the image.
          sliderTimeSeriesBack.addEventListener 'click', ->
            newVal = scope.volume.volumeNbr - 1
            # Do the update only if the new value does not fall below 1.
            if newVal >= 1
              sliderTimeSeries.noUiSlider.set(newVal)
              updateImage(newVal)

          # When the forward button is clicked, increase the slider position by
          # one and update the image.
          sliderTimeSeriesFwd.addEventListener 'click', ->
            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 <= scope.timeSeries.image.volumes.size
              sliderTimeSeries.noUiSlider.set(newVal)
              updateImage(newVal)


    directives.directive 'qiFocus', ['$timeout',
