             step: 1
             range:
               'min': 1
-              'max': scope.timeSeries.image.volumes.size
+              'max': rangeMax
             pips:
               mode: 'positions'
               values: [0, 100]
-              density: 4
+              density: 100 / (rangeMax - 1)
 
           # When the slider is dragged, get the new slider position and update
           # the image.

          # slider compile must be coordinated with the image display compile.
          # The slider create must then be deferred as a callback after load
          # completes.
          noUiSlider.create sliderAxialPlane,
            start: [ scope.slice.sliceNbr ]
            step: 1
            range:
              'min': 1
              'max': scope.timeSeries.image.slices.size
            pips:
              mode: 'positions'
              values: [0, 100]
              density: 9

          # When the slider is dragged, get the new slider position and update
          # the image.

        # the create function from being called twice, which may result from an
        # Angular digest anomaly.
        if !sliderTimeSeries.noUiSlider
          rangeMax = scope.timeSeries.image.volumes.size
          # Create the slider. Pips are placed at each end of the slider (at
          # the 0% and 100% positions) and tick marks are added at a density of
          # one per slider step.
          #
          # TODO - Add tooltip to show current slider value.
          #
