Issue 41: Adding option showScale (or data-slider-showscale) to show min and max slider

css/simple-slider-volume.css

@@ -46,3 +46,21 @@
   background: -webkit-linear-gradient(top, #c5c5c5, #a2a2a2);
   background: linear-gradient(top, #c5c5c5, #a2a2a2);
 }
+
+.slider-volume > .scale {
+    width: 100%;
+    color: #888; 
+    font-size: small;
+}
+
+.slider-volume > .scale > .min-scale {
+    float: left;
+    font-weight: bold;
+    color: #622;
+}
+
+.slider-volume > .scale > .max-scale {
+    float: right;
+    font-weight: bold;
+    color: #262;
+}

css/simple-slider.css

@@ -53,3 +53,16 @@
 	border-color: #496805;
 }
 
+.slider > .scale {
+    width: 100%;
+    color: #888; 
+    font-size: small;
+}
+
+.slider > .scale > .min-scale {
+    float: left;
+}
+
+.slider > .scale > .max-scale {
+    float: right;
+}

demo.html

@@ -29,9 +29,15 @@ <h1>jQuery Simple Slider Examples</h1>
   <h2>Basic Example</h2>
   <input type="text" data-slider="true">
 
+  <h2>Basic Example (with Scale) </h2>
+  <input type="text" data-slider="true" data-slider-showScale="true">
+
   <h2>Basic Example (Themed)</h2>
   <input type="text" data-slider="true" data-slider-theme="volume">
 
+  <h2>Basic Example (Themed with Scale)</h2>
+  <input type="text" data-slider="true" data-slider-theme="volume" data-slider-showScale="true">
+
   <h2>Predefined Value</h2>
   <input type="text" value="0.2" data-slider="true">
 
@@ -41,6 +47,9 @@ <h2>Steps</h2>
   <h2>Range</h2>
   <input type="text" data-slider="true" data-slider-range="10,1000">
 
+  <h2>Range (with Scale)</h2>
+  <input type="text" data-slider="true" data-slider-range="10,1000" data-slider-showScale="true">
+
   <h2>Range &amp; Steps</h2>
   <input type="text" data-slider="true" data-slider-range="100,500" data-slider-step="100">
 

js/simple-slider.js

@@ -2,6 +2,7 @@
  jQuery Simple Slider
 
  Copyright (c) 2012 James Smith (http://loopj.com)
+ Copyright (c) 2013 Erik J. Nedwidek (http://github.com/nedwidek)
 
  Licensed under the MIT license (http://mit-license.org/)
 */
@@ -23,7 +24,8 @@ var __slice = [].slice,
         classPrefix: null,
         classSuffix: null,
         theme: null,
-        highlight: false
+        highlight: false,
+        showScale: false
       };
       this.settings = $.extend({}, this.defaultOptions, options);
       if (this.settings.theme) {
@@ -106,6 +108,20 @@ var __slice = [].slice,
       }
       this.setSliderPositionFromValue(this.value);
       ratio = this.valueToRatio(this.value);
+      if (this.settings.showScale) {
+        this.scale = this.createDivElement("scale");
+        this.minScale = this.createSpanElement("min-scale", this.scale);
+        this.maxScale = this.createSpanElement("max-scale", this.scale);
+
+        range = this.getRange();
+
+        this.minScale.html(range.min);
+        this.maxScale.html(range.max);
+
+        this.scale.css('marginTop', function(index, currentValue) {
+            return (parseInt(currentValue, 10)  + this.previousSibling.offsetHeight / 2) + 'px';
+        });
+      }
       this.input.trigger("slider:ready", {
         value: this.value,
         ratio: ratio,
@@ -125,6 +141,12 @@ var __slice = [].slice,
       return item;
     };
 
+    SimpleSlider.prototype.createSpanElement = function(classname, parent) {
+      var item;
+      item = $("<span>").addClass(classname).appendTo(parent);
+      return item;
+    };
+
     SimpleSlider.prototype.setRatio = function(ratio) {
       var value;
       ratio = Math.min(1, ratio);
@@ -357,6 +379,9 @@ var __slice = [].slice,
       if ($el.data("slider-animate") != null) {
         settings.animate = $el.data("slider-animate");
       }
+      if ($el.data("slider-showscale") != null) {
+        settings.showScale = $el.data("slider-showscale");
+      }
       return $el.simpleSlider(settings);
     });
   });