         sliderAxialPlaneBack = document.getElementById('qi-slider-axial-plane-back')
         sliderAxialPlaneFwd = document.getElementById('qi-slider-axial-plane-fwd')
 
+        # Configure the slider.
+        #
+        # TODO - Obtain the range max from the image object properties.
+        #
         noUiSlider.create sliderAxialPlane,
           start: [ scope.slice.sliceNbr ]
           step: 1

            ]
            density: 4

        sliderTimeSeries.noUiSlider.on 'change', ->
          val = Math.floor sliderTimeSeries.noUiSlider.get()
          console.log val

        sliderTimeSeriesBack.addEventListener 'click', ->
          val = Math.floor(sliderTimeSeries.noUiSlider.get()) - 1
          sliderTimeSeries.noUiSlider.set(val)
          console.log val

        sliderTimeSeriesFwd.addEventListener 'click', ->
          val = Math.floor(sliderTimeSeries.noUiSlider.get()) + 1
          sliderTimeSeries.noUiSlider.set(val)
          console.log val


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

            ]
            density: 4

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

        # When the slider is dragged, get the new slider position and update
        # the image.
        sliderAxialPlane.noUiSlider.on 'slide', ->
          newVal = Math.floor sliderAxialPlane.noUiSlider.get()
          updateImage(newVal)

        # When the back button is clicked, reduce the slider position by one
        # and update the image.
        sliderAxialPlaneBack.addEventListener 'click', ->
          newVal = Math.floor(sliderAxialPlane.noUiSlider.get()) - 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 = Math.floor(sliderAxialPlane.noUiSlider.get()) + 1
          # Do the update only if the new value does not go above the number of
          # slices in the image axial plane.
          #
          # TODO - Obtain this value from the image object properties.
          #
          if newVal <= 12
            sliderAxialPlane.noUiSlider.set(newVal)
            updateImage(newVal)


    directives.directive 'qiSliderTimeSeries', ->
