Fine grain control of when to show the range.

Also moved all static styling to SCSS.

common/lib/xmodule/xmodule/css/video/display.scss

@@ -139,6 +139,24 @@ div.video {
           box-shadow: inset 0 1px 0 #999;
         }
 
+        div.ui-corner-all.slider-range {
+          background-color: #1e91d3;
+
+          /* We add opacity so that we can discern the amount of video that has
+           * been played. The progress will advance as a gray-shaded area. When
+           * it will overlap with the range, you will see a different shade of
+           * the range for part that has been played, and for part that is
+           * still to be played.
+           *
+           * For CSS opacity, different browsers are handled differently.
+           */
+          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+          filter: alpha(opacity=30);
+          -moz-opacity: 0.3;
+          -khtml-opacity: 0.3;
+          opacity: 0.3;
+        }
+
         a.ui-slider-handle {
           background: $pink url(../images/slider-handle.png) center center no-repeat;
           background-size: 50%;

common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js

@@ -86,8 +86,6 @@ function () {
     // ***************************************************************
 
     function buildSlider(state) {
-        console.log('state = ', state);
-
         state.videoProgressSlider.slider = state.videoProgressSlider.el
             .slider({
                 range: 'min',
@@ -101,37 +99,52 @@ function () {
     }
 
     function updateStartEndTimeRegion(params) {
-        var left, width;
-
-        if (this.config.end && params.duration) {
-            left = parseInt(100 * (this.config.start / params.duration), 10);
-            width = parseInt(
-                100 * (
-                    (this.config.end - this.config.start) / params.duration
-                ),
-                10
-            );
-
-            if (!this.videoProgressSlider.sliderRange) {
-                this.videoProgressSlider.sliderRange = $('<div />')
-                    .addClass('ui-slider-range')
-                    .addClass('ui-widget-header')
-                    .addClass('ui-corner-all')
-                    .css({
-                        left: left + '%',
-                        width: width + '%',
-                        'background-color': 'blue'
-                    });
-
-                this.videoProgressSlider.sliderProgress
-                    .after(this.videoProgressSlider.sliderRange);
-            } else {
-                this.videoProgressSlider.sliderRange
-                    .css({
-                        left: left + '%',
-                        width: width + '%'
-                    });
-            }
+        var left, width, start, end;
+
+        // We must have a duration in order to determine the area of range.
+        // It also must be non-zero.
+        if (!params.duration) {
+            return;
+        }
+
+        // If the range spans the entire length of video, we don't do anything.
+        if (!this.config.start && !this.config.end) {
+            return;
+        }
+
+        start = this.config.start;
+
+        // If end is set to null, then we set it to the end of the video. We
+        // know that start is not a the beginning, therefore we must build a
+        // range.
+        if (!this.config.end) {
+            end = params.duration;
+        } else {
+            end = this.config.end;
+        }
+
+        left = parseInt(100 * (start / params.duration), 10);
+        width = parseInt(100 * ((end - start) / params.duration), 10);
+
+        if (!this.videoProgressSlider.sliderRange) {
+            this.videoProgressSlider.sliderRange = $('<div />')
+                .addClass('ui-slider-range')
+                .addClass('ui-widget-header')
+                .addClass('ui-corner-all')
+                .addClass('slider-range')
+                .css({
+                    left: left + '%',
+                    width: width + '%'
+                });
+
+            this.videoProgressSlider.sliderProgress
+                .after(this.videoProgressSlider.sliderRange);
+        } else {
+            this.videoProgressSlider.sliderRange
+                .css({
+                    left: left + '%',
+                    width: width + '%'
+                });
         }
     }