Merge pull request #62 from andreruffert/develop

Release v0.2.9

Author: andreruffert

README.md

@@ -1,4 +1,4 @@
-#rangeslider.js [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
+#rangeslider.js [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/) [![rangeslider.js](http://img.shields.io/badge/rangeslider-.js-00ff00.svg)](http://andreruffert.github.io/rangeslider.js/)
 Simple, small and fast JavaScript/jQuery polyfill for the HTML5 `<input type="range">` slider element.            
 Check out the [demo](http://andreruffert.github.io/rangeslider.js/). 
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "rangeslider.js",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "main": "dist/rangeslider.js",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "author": "André Ruffert",

dist/rangeslider.css

@@ -1,7 +1,6 @@
 .rangeslider,
 .rangeslider__fill {
   background: #e6e6e6;
-  border: none;
   display: block;
   height: 20px;
   width: 100%;
@@ -39,14 +38,14 @@
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
   background-image: -o-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
-  -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  -ms-border-radius: 20px;
-  -o-border-radius: 20px;
-  border-radius: 20px;
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
 }
 .rangeslider__handle:after {
   content: "";
@@ -64,9 +63,22 @@
   background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
   background-image: -o-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
   background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  -ms-border-radius: 20px;
-  -o-border-radius: 20px;
-  border-radius: 20px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+}
+.rangeslider__handle:active {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
+  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
+  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
+}
+
+input[type="range"]:focus + .rangeslider .rangeslider__handle {
+  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
+  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
+  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
 }

dist/rangeslider.js

@@ -1,15 +1,19 @@
 /*! rangeslider.js - v0.2.8 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
 'use strict';
 
-(function (module) {
+(function(factory) {
     if (typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.
-        define(['jquery'], module);
+        define(['jquery'], factory);
+    }
+    else if (typeof exports === 'object') {
+        // CommonJS
+        factory(require('jquery'));
     } else {
         // Browser globals
-        module(jQuery);
+        factory(jQuery);
     }
-})(function($, undefined) {
+}(function($) {
 
     /**
      * Range feature detection
@@ -98,21 +102,21 @@
         }
 
         this.identifier = 'js-' + pluginName + '-' +(+new Date());
-        this.min        = parseFloat(this.$element[0].getAttribute('min')) || 0;
-        this.max        = parseFloat(this.$element[0].getAttribute('max')) || 100;
-        this.value      = parseFloat(this.$element[0].value) || this.min + (this.max-this.min)/2;
-        this.step       = parseFloat(this.$element[0].getAttribute('step')) || 1;
+        this.min        = parseFloat(this.$element[0].getAttribute('min') || 0);
+        this.max        = parseFloat(this.$element[0].getAttribute('max') || 100);
+        this.value      = parseFloat(this.$element[0].value || this.min + (this.max-this.min)/2);
+        this.step       = parseFloat(this.$element[0].getAttribute('step') || 1);
         this.$fill      = $('<div class="' + this.options.fillClass + '" />');
         this.$handle    = $('<div class="' + this.options.handleClass + '" />');
-        this.$range     = $('<div class="' + this.options.rangeClass + '" id="' + this.identifier + '" />').insertBefore(this.$element).prepend(this.$fill, this.$handle);
+        this.$range     = $('<div class="' + this.options.rangeClass + '" id="' + this.identifier + '" />').insertAfter(this.$element).prepend(this.$fill, this.$handle);
 
         // visually hide the input
         this.$element.css({
             'position': 'absolute',
             'width': '1px',
             'height': '1px',
             'overflow': 'hidden',
-            'visibility': 'hidden'
+            'opacity': '0'
         });
 
         // Store context
@@ -247,7 +251,7 @@
 
     Plugin.prototype.getValueFromPosition = function(pos) {
         var percentage, value;
-        percentage = (pos) / (this.maxHandleX);
+        percentage = ((pos) / (this.maxHandleX || 1));
         value = this.step * Math.ceil((((percentage) * (this.max - this.min)) + this.min) / this.step);
         return Number((value).toFixed(2));
     };
@@ -296,4 +300,4 @@
         });
     };
 
-});
+}));