             ]
             density: 4
 
-        sliderTimeSeries.noUiSlider.on 'change', ->
-          val = Math.floor sliderTimeSeries.noUiSlider.get()
-          console.log val
-
+        updateImage = (sliderPos) ->
+          # Update the image with the new volume number, which corresponds to
+          # new slider position.
+          scope.$apply ->
+            scope.volume.volumeNbr = sliderPos
+
+        # 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.
         sliderTimeSeriesBack.addEventListener 'click', ->
-          val = Math.floor(sliderTimeSeries.noUiSlider.get()) - 1
-          sliderTimeSeries.noUiSlider.set(val)
-          console.log val
-
+          newVal = Math.floor(sliderTimeSeries.noUiSlider.get()) - 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', ->
-          val = Math.floor(sliderTimeSeries.noUiSlider.get()) + 1
-          sliderTimeSeries.noUiSlider.set(val)
-          console.log val
+          newVal = Math.floor(sliderTimeSeries.noUiSlider.get()) + 1
+          # Do the update only if the new value does not go above the number of
+          # volumes in the time series.
+          #
+          # TODO - Obtain this value from the time series object properties.
+          #
+          if newVal <= 64
+            sliderTimeSeries.noUiSlider.set(newVal)
+            updateImage(newVal)
 
 
     directives.directive 'qiFocus', ['$timeout',

            ]
            density: 4

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

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

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


    directives.directive 'qiSliderTimeSeries', ->

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

        # Configure the slider.
        #
        # TODO - Obtain the range max from the time series object properties.
        #
        noUiSlider.create sliderTimeSeries,
          start: [ scope.volume.volumeNbr ]
          step: 1
