Merge pull request loopj#25 from maartenvg/highlight-track-up-to-handle

Add optional highlighting of track up to the handle (like loopj#7)

Author: loopj

css/simple-slider-volume.css

@@ -23,7 +23,7 @@
               -webkit-radial-gradient(	50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
 }
 
-.slider-volume > .track {
+.slider-volume > .track, .slider-volume > .highlight-track {
   height: 11px;
 
   background: #787878;
@@ -38,4 +38,11 @@
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
-}
+}
+
+.slider-volume > .highlight-track {
+  background-color: #c5c5c5;
+  background: -moz-linear-gradient(top, #c5c5c5, #a2a2a2);
+  background: -webkit-linear-gradient(top, #c5c5c5, #a2a2a2);
+  background: linear-gradient(top, #c5c5c5, #a2a2a2);
+}

css/simple-slider.css

@@ -25,7 +25,8 @@
   background: -webkit-linear-gradient(top, #8DCA09, #8DCA09);
 }
 
-.slider > .track {
+
+.slider > .track, .slider > .highlight-track {
   background: #ccc;
   background: -webkit-linear-gradient(top, #bbb, #ddd);
   background: -moz-linear-gradient(top, #bbb, #ddd);
@@ -41,4 +42,14 @@
 
   border: 1px solid #aaa;
   height: 4px;
-}
+}
+
+.slider > .highlight-track {
+	background-color: #8DCA09;
+	background: -webkit-linear-gradient(top, #8DCA09, #72A307);
+	background: -moz-linear-gradient(top, #8DCA09, #72A307);
+	background: linear-gradient(top, #8DCA09, #72A307);
+	
+	border-color: #496805;
+}
+

demo.html

@@ -56,6 +56,11 @@ <h2>Predefined List &amp; Snap</h2>
   <h2>Predefined List, Equal Steps &amp; Snap</h2>
   <input type="text" data-slider="true" data-slider-values="0,100,500,800,2000" data-slider-equal-steps="true" data-slider-snap="true">
 
+  <h2>Highlighted</h2>
+  <input type="text" data-slider="true" value="0.8" data-slider-highlight="true">
+
+  <h2>Highlighted (Themed)</h2>
+  <input type="text" data-slider="true" value="0.4" data-slider-highlight="true" data-slider-theme="volume">
 
   <script>
   $("[data-slider]")
@@ -72,4 +77,4 @@ <h2>Predefined List, Equal Steps &amp; Snap</h2>
     });
   </script>
 </body>
-</html>
+</html>

js/simple-slider.coffee

@@ -23,6 +23,7 @@
         classPrefix: null
         classSuffix: null
         theme: null
+        highlight: false
 
       @settings = $.extend({}, @defaultOptions, options)
       @settings.classSuffix = "-#{@settings.theme}" if @settings.theme
@@ -39,27 +40,19 @@
           boxSizing: "border-box"
         .insertBefore @input
       @slider.attr("id", @input.attr("id") + "-slider") if @input.attr("id")
-
-      # Create the track
-      @track = $("<div>")
-        .addClass("track")
+      
+      @track = @createDivElement("track")
         .css
-          position: "absolute"
-          top: "50%"
           width: "100%"
-          userSelect: "none"
-          cursor: "pointer"
-        .appendTo @slider
-
+      
+      if @settings.highlight
+        # Create the highlighting track on top of the track
+        @highlightTrack = @createDivElement("highlight-track")
+          .css
+            width: "0"
+      
       # Create the slider drag target
-      @dragger = $("<div>")
-        .addClass("dragger")
-        .css
-          position: "absolute"
-          top: "50%"
-          userSelect: "none"
-          cursor: "pointer"
-        .appendTo @slider
+      @dragger = @createDivElement("dragger")
 
       # Adjust dimensions now elements are in the DOM
       @slider.css
@@ -69,6 +62,10 @@
 
       @track.css
         marginTop: @track.outerHeight()/-2
+  
+      if @settings.highlight
+        @highlightTrack.css
+          marginTop: @track.outerHeight()/-2
 
       @dragger.css
         marginTop: @dragger.outerWidth()/-2
@@ -77,11 +74,12 @@
       # Hook up drag/drop mouse events
       @track
         .mousedown (e) =>
-          return unless e.which == 1
+          @trackEvent(e)
 
-          @domDrag(e.pageX, e.pageY, true)
-          @dragging = true
-          false
+      if @settings.highlight
+        @highlightTrack
+          .mousedown (e) =>
+            @trackEvent(e)
 
       @dragger
         .mousedown (e) =>
@@ -135,6 +133,19 @@
         position: ratio * @slider.outerWidth()
         el: @slider
 
+    # Create the basis of the track-div(s)
+    createDivElement: (classname) ->
+      item = $("<div>")
+        .addClass(classname)
+        .css
+          position: "absolute"
+          top: "50%"
+          userSelect: "none"
+          cursor: "pointer"
+        .appendTo @slider
+      return item
+    
+
     # Set the ratio (value between 0 and 1) of the slider.
     # Exposed via el.slider("setRatio", ratio)
     setRatio: (ratio) ->
@@ -166,6 +177,14 @@
       # Trigger value changed events
       @valueChanged(value, ratio, "setValue")
 
+    # Respond to an event on a track
+    trackEvent: (e) -> 
+      return unless e.which == 1
+
+      @domDrag(e.pageX, e.pageY, true)
+      @dragging = true
+      false
+
     # Respond to a dom drag event
     domDrag: (pageX, pageY, animate=false) ->
       # Normalize position within allowed range
@@ -194,8 +213,10 @@
     setSliderPosition: (position, animate=false) ->
       if animate and @settings.animate
         @dragger.animate left: position, 200
+        @highlightTrack.animate width: position, 200 if @settings.highlight
       else
         @dragger.css left: position
+        @highlightTrack.css width: position if @settings.highlight
 
     # Set the slider position given a value
     setSliderPositionFromValue: (value, animate=false) ->
@@ -331,6 +352,7 @@
       settings.snap = $el.data("slider-snap")
       settings.equalSteps = $el.data("slider-equal-steps")
       settings.theme = $el.data("slider-theme") if $el.data("slider-theme")
+      settings.highlight = $el.data("slider-highlight") if $el.attr("data-slider-highlight")
 
       # Activate the plugin
       $el.simpleSlider settings

js/simple-slider.js

@@ -22,7 +22,8 @@ var __slice = [].slice,
         snapMid: false,
         classPrefix: null,
         classSuffix: null,
-        theme: null
+        theme: null,
+        highlight: false
       };
       this.settings = $.extend({}, this.defaultOptions, options);
       if (this.settings.theme) {
@@ -37,19 +38,15 @@ var __slice = [].slice,
       if (this.input.attr("id")) {
         this.slider.attr("id", this.input.attr("id") + "-slider");
       }
-      this.track = $("<div>").addClass("track").css({
-        position: "absolute",
-        top: "50%",
-        width: "100%",
-        userSelect: "none",
-        cursor: "pointer"
-      }).appendTo(this.slider);
-      this.dragger = $("<div>").addClass("dragger").css({
-        position: "absolute",
-        top: "50%",
-        userSelect: "none",
-        cursor: "pointer"
-      }).appendTo(this.slider);
+      this.track = this.createDivElement("track").css({
+        width: "100%"
+      });
+      if (this.settings.highlight) {
+        this.highlightTrack = this.createDivElement("highlight-track").css({
+          width: "0"
+        });
+      }
+      this.dragger = this.createDivElement("dragger");
       this.slider.css({
         minHeight: this.dragger.outerHeight(),
         marginLeft: this.dragger.outerWidth() / 2,
@@ -58,18 +55,23 @@ var __slice = [].slice,
       this.track.css({
         marginTop: this.track.outerHeight() / -2
       });
+      if (this.settings.highlight) {
+        this.highlightTrack.css({
+          marginTop: this.track.outerHeight() / -2
+        });
+      }
       this.dragger.css({
         marginTop: this.dragger.outerWidth() / -2,
         marginLeft: this.dragger.outerWidth() / -2
       });
       this.track.mousedown(function(e) {
-        if (e.which !== 1) {
-          return;
-        }
-        _this.domDrag(e.pageX, e.pageY, true);
-        _this.dragging = true;
-        return false;
+        return _this.trackEvent(e);
       });
+      if (this.settings.highlight) {
+        this.highlightTrack.mousedown(function(e) {
+          return _this.trackEvent(e);
+        });
+      }
       this.dragger.mousedown(function(e) {
         if (e.which !== 1) {
           return;
@@ -112,6 +114,17 @@ var __slice = [].slice,
       });
     }
 
+    SimpleSlider.prototype.createDivElement = function(classname) {
+      var item;
+      item = $("<div>").addClass(classname).css({
+        position: "absolute",
+        top: "50%",
+        userSelect: "none",
+        cursor: "pointer"
+      }).appendTo(this.slider);
+      return item;
+    };
+
     SimpleSlider.prototype.setRatio = function(ratio) {
       var value;
       ratio = Math.min(1, ratio);
@@ -129,6 +142,15 @@ var __slice = [].slice,
       return this.valueChanged(value, ratio, "setValue");
     };
 
+    SimpleSlider.prototype.trackEvent = function(e) {
+      if (e.which !== 1) {
+        return;
+      }
+      this.domDrag(e.pageX, e.pageY, true);
+      this.dragging = true;
+      return false;
+    };
+
     SimpleSlider.prototype.domDrag = function(pageX, pageY, animate) {
       var pagePos, ratio, value;
       if (animate == null) {
@@ -155,13 +177,23 @@ var __slice = [].slice,
         animate = false;
       }
       if (animate && this.settings.animate) {
-        return this.dragger.animate({
+        this.dragger.animate({
           left: position
         }, 200);
+        if (this.settings.highlight) {
+          return this.highlightTrack.animate({
+            width: position
+          }, 200);
+        }
       } else {
-        return this.dragger.css({
+        this.dragger.css({
           left: position
         });
+        if (this.settings.highlight) {
+          return this.highlightTrack.css({
+            width: position
+          });
+        }
       }
     };
 
@@ -319,6 +351,9 @@ var __slice = [].slice,
       if ($el.data("slider-theme")) {
         settings.theme = $el.data("slider-theme");
       }
+      if ($el.attr("data-slider-highlight")) {
+        settings.highlight = $el.data("slider-highlight");
+      }
       return $el.simpleSlider(settings);
     });
   });