Issue 43: Dynamically added inputs do not take configuration from data-slider-* attributes

Documentation.md

@@ -0,0 +1,141 @@
+jQuery Simple Slider
+====================
+
+Overview
+--------
+
+Simple Slider is a jQuery plugin which allows your users to select a value from a numerical range by simply dragging a slider.
+
+Features
+--------
+
+* Configurable without editing any JavaScript
+* No external dependencies, apart from jQuery
+* Compact size
+* Unobtrusive JavaScript, activate using data-slider="true" on any input
+* Easy to skin/style purely in css, no images required
+* Slider value goes directly into your input element, for easy use in normal html forms
+* Supports both pre-defined values and a continous ranges
+* Supports smooth sliding and snap-to-value sliding
+* Supports highlighting the slider background when dragging
+
+Installation
+------------
+
+Include jQuery and the Simple Slider JavaScript and CSS files on your page, then activate Simple Slider on your text input using the data-slider attribute:
+
+    <!-- Include jQuery -->
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+
+    <!-- Include Simple Slider JavaScript and CSS -->
+    <script src="yourfiles/simple-slider.js"></script>
+    <link href="yourfiles/simple-slider.css" rel="stylesheet" type="text/css" />
+
+    <!-- Activate Simple Slider on your input -->
+    <input type="text" data-slider="true">
+
+You can also manually turn any text input into a Simple Slider in JavaScript as follows (settings will be taken from data-slider-* attributes):
+
+    $("#my-input").simpleSlider();
+
+Attributes can also be specified in the javascript:
+
+    $("#my-input").simpleSlider({
+        animate: true,
+        theme: 'volume',
+        showScale: true
+    });
+
+Configuration
+-------------
+
+### data-slider-range 
+> Javascript: range
+>
+> The range representing the start and end of the slider. Eg. data-slider-range="10,1000"
+
+### data-slider-step
+> Javascript: step
+>
+> The interval to move when dragging the slider. Eg. data-slider-step="100"
+
+### data-slider-snap
+> Javascript: snap
+>
+> Setting this to true makes the slider snap to each step when dragging, otherwise dragging will be continuous. Eg. data-slider-snap="true"
+
+### data-slider-values
+> Javascript: allowedValues (array)
+>
+> A pre-defined list of values to allow sliding for. Eg. data-slider-values="0,100,500,800,2000"
+
+### data-slider-equal-steps
+> Javascript: equalSteps
+>
+> Setting this to true makes the spacing between each always value equal when used with data-slider-values. Eg. data-slider-equal-steps="true"
+
+### data-slider-theme
+> Javascript: theme
+>
+> The CSS theme to use when rendering this slider. Setting this value adds a suffix to the CSS class of the slider. Eg. data-slider-theme="volume"
+
+### data-slider-highlight
+> Javascript: highlight
+>
+> Boolean for if we should highlight the background of the slider as it it dragged. Eg. data-slider-highlight="true"
+
+### data-slider-showscale
+> Javascript: showScale
+>
+> Boolean for if we should display the minimum and maximum scale below the slider. Eg. data-slider-highlight="true"
+
+Events
+------
+
+You can bind to the following jQuery events using bind, for example: $("#my-input").bind("slider:ready", function (event, data) { ... })
+
+### slider:ready
+> Fired when the slider is loaded and attached to your input field.
+
+### slider:changed
+> Fired when the value of your slider changes.
+
+All Simple Slider events pass 2 parameters into your function, event and data. event is a regular jQuery event object. data contains the following properties:
+
+### value
+> The current value of the slider.
+
+### ratio
+> How far, as a percentage, the slider is from start to end (0 - 1).
+
+### el
+> The generated outer HTML element representing the slider.
+
+Getting Slider Values
+---------------------
+
+The value the user selects with the slider is immediately available inside the value attribute of the text input you attached the slider to. This means you can include Simple Slider in your HTML forms and the the selected value will automatically be send to your server when the form is submitted.
+
+If you would like to get the slider’s value using javascript, you can register for the slider:changed event:
+
+    $("#my-input").bind("slider:changed", function (event, data) {
+        // The currently selected value of the slider
+        alert(data.value);
+
+        // The value as a ratio of the slider (between 0 and 1)
+        alert(data.ratio);
+    });
+
+Methods
+-------
+
+### selector.simpleSlider("setValue", value);
+> Sets the value of the slider.
+
+### selector.simpleSlider("setRatio", ratio);
+> Sets the ratio (see above) of the slider.
+
+License
+-------
+
+Simple Slider is released under the MIT license.

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

@@ -1,7 +1,10 @@
 /*
  jQuery Simple Slider
 
- Copyright (c) 2012 James Smith (http://loopj.com)
+ Copyright (c) 2012, 2013 James Smith (http://loopj.com)
+ Copyright (c) 2013 Maarten van Grootel (http://maatenvangrootel.nl)
+ Copyright (c) 2013 Nathan Hunzaker (http://natehunzaker.com)
+ Copyright (c) 2013 Erik J. Nedwidek (http://github.com/nedwidek)
 
  Licensed under the MIT license (http://mit-license.org/)
 */
@@ -23,8 +26,12 @@ var __slice = [].slice,
         classPrefix: null,
         classSuffix: null,
         theme: null,
-        highlight: false
+        highlight: false,
+        showScale: false
       };
+      if(typeof options == 'undefined') {
+        options = this.loadDataOptions();
+      }
       this.settings = $.extend({}, this.defaultOptions, options);
       if (this.settings.theme) {
         this.settings.classSuffix = "-" + this.settings.theme;
@@ -106,6 +113,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,
@@ -114,6 +135,44 @@ var __slice = [].slice,
       });
     }
 
+    SimpleSlider.prototype.loadDataOptions = function() {
+      var options = {};
+      allowedValues = this.input.data("slider-values");
+      if (allowedValues) {
+        options.allowedValues = (function() {
+          var _i, _len, _ref, _results;
+          _ref = allowedValues.split(",");
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            x = _ref[_i];
+            _results.push(parseFloat(x));
+          }
+          return _results;
+        })();
+      }
+      if (this.input.data("slider-range")) {
+        options.range = this.input.data("slider-range").split(",");
+      }
+      if (this.input.data("slider-step")) {
+        options.step = this.input.data("slider-step");
+      }
+      options.snap = this.input.data("slider-snap");
+      options.equalSteps = this.input.data("slider-equal-steps");
+      if (this.input.data("slider-theme")) {
+        options.theme = this.input.data("slider-theme");
+      }
+      if (this.input.attr("data-slider-highlight")) {
+        options.highlight = this.input.data("slider-highlight");
+      }
+      if (this.input.data("slider-animate") != null) {
+        options.animate = this.input.data("slider-animate");
+      }
+      if (this.input.data("slider-showscale") != null) {
+        options.showScale = this.input.data("slider-showscale");
+      }
+      return options;
+    }
+
     SimpleSlider.prototype.createDivElement = function(classname) {
       var item;
       item = $("<div>").addClass(classname).css({
@@ -125,6 +184,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);
@@ -326,38 +391,7 @@ var __slice = [].slice,
     return $("[data-slider]").each(function() {
       var $el, allowedValues, settings, x;
       $el = $(this);
-      settings = {};
-      allowedValues = $el.data("slider-values");
-      if (allowedValues) {
-        settings.allowedValues = (function() {
-          var _i, _len, _ref, _results;
-          _ref = allowedValues.split(",");
-          _results = [];
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            x = _ref[_i];
-            _results.push(parseFloat(x));
-          }
-          return _results;
-        })();
-      }
-      if ($el.data("slider-range")) {
-        settings.range = $el.data("slider-range").split(",");
-      }
-      if ($el.data("slider-step")) {
-        settings.step = $el.data("slider-step");
-      }
-      settings.snap = $el.data("slider-snap");
-      settings.equalSteps = $el.data("slider-equal-steps");
-      if ($el.data("slider-theme")) {
-        settings.theme = $el.data("slider-theme");
-      }
-      if ($el.attr("data-slider-highlight")) {
-        settings.highlight = $el.data("slider-highlight");
-      }
-      if ($el.data("slider-animate") != null) {
-        settings.animate = $el.data("slider-animate");
-      }
-      return $el.simpleSlider(settings);
+      return $el.simpleSlider();
     });
   });
 })(this.jQuery || this.Zepto, this);