Merge pull request #71 from andreruffert/develop

Release v0.3.1

bower.json

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

dist/rangeslider.css

@@ -18,6 +18,11 @@
   position: relative;
 }
 
+.rangeslider--disabled {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+  opacity: 0.4;
+}
+
 .rangeslider__fill {
   background: #00ff00;
   position: absolute;

dist/rangeslider.js

@@ -1,4 +1,4 @@
-/*! rangeslider.js - v0.3.0 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
+/*! rangeslider.js - v0.3.1 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
 'use strict';
 
 (function(factory) {
@@ -31,6 +31,7 @@
         defaults = {
             polyfill: true,
             rangeClass: 'rangeslider',
+            disabledClass: 'rangeslider--disabled',
             fillClass: 'rangeslider__fill',
             handleClass: 'rangeslider__handle',
             startEvent: ['mousedown', 'touchstart', 'pointerdown'],
@@ -133,7 +134,7 @@
             delay(function() { _this.update(); }, 300);
         }, 20));
 
-        this.$document.on(this.startEvent, '#' + this.identifier, this.handleDown);
+        this.$document.on(this.startEvent, '#' + this.identifier + ':not(.' + this.options.disabledClass + ')', this.handleDown);
 
         // Listen to programmatic value changes
         this.$element.on('change' + '.' + pluginName, function(e, data) {
@@ -161,6 +162,13 @@
         this.grabX          = this.handleWidth / 2;
         this.position       = this.getPositionFromValue(this.value);
 
+        // Consider disabled state
+        if (this.$element[0].disabled) {
+            this.$range.addClass(this.options.disabledClass);
+        } else {
+            this.$range.removeClass(this.options.disabledClass);
+        }
+
         this.setPosition(this.position);
     };
 

example/index.html

@@ -68,6 +68,16 @@ <h2><code>value="0"</code></h2>
     <br>
     <br>
 
+    <div id="js-example-disabled">
+        <h2><code>disabled</code></h2>
+        <input type="range" min="10" max="100" data-rangeslider disabled>
+        <output></output>
+        <button data-behaviour="toggle">Toggle disabled state</button>
+    </div>
+
+    <br>
+    <br>
+
     <div>
         <h2><code>max="0"</code> disables slider</h2>
         <input type="range" max="0" data-rangeslider>
@@ -119,6 +129,19 @@ <h2>Destroy a plugin instance</h2>
             valueOutput(e.target);
         });
 
+        // Example functionality to demonstrate disabled functionality
+        $document .on('click', '#js-example-disabled button[data-behaviour="toggle"]', function(e) {
+            var $inputRange = $('input[type="range"]', e.target.parentNode);
+
+            if ($inputRange[0].disabled) {
+                $inputRange.prop("disabled", false);
+            }
+            else {
+                $inputRange.prop("disabled", true);
+            }
+            $inputRange.rangeslider('update');
+        });
+
         // Example functionality to demonstrate programmatic value changes
         $document.on('click', '#js-example-change-value button', function(e) {
             var $inputRange = $('input[type="range"]', e.target.parentNode),

package.json

@@ -2,7 +2,7 @@
   "name": "rangeslider.js",
   "title": "rangeslider.js",
   "description": "Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type=\"range\"> slider element",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "license": "MIT",
   "keywords": [

src/rangeslider.js

@@ -30,6 +30,7 @@
         defaults = {
             polyfill: true,
             rangeClass: 'rangeslider',
+            disabledClass: 'rangeslider--disabled',
             fillClass: 'rangeslider__fill',
             handleClass: 'rangeslider__handle',
             startEvent: ['mousedown', 'touchstart', 'pointerdown'],
@@ -132,7 +133,7 @@
             delay(function() { _this.update(); }, 300);
         }, 20));
 
-        this.$document.on(this.startEvent, '#' + this.identifier, this.handleDown);
+        this.$document.on(this.startEvent, '#' + this.identifier + ':not(.' + this.options.disabledClass + ')', this.handleDown);
 
         // Listen to programmatic value changes
         this.$element.on('change' + '.' + pluginName, function(e, data) {
@@ -160,6 +161,13 @@
         this.grabX          = this.handleWidth / 2;
         this.position       = this.getPositionFromValue(this.value);
 
+        // Consider disabled state
+        if (this.$element[0].disabled) {
+            this.$range.addClass(this.options.disabledClass);
+        } else {
+            this.$range.removeClass(this.options.disabledClass);
+        }
+
         this.setPosition(this.position);
     };
 

src/rangeslider.scss

@@ -18,6 +18,10 @@ $rangeslider__handle:   ".rangeslider__handle";
     position: relative;
 }
 
+#{$rangeslider}--disabled {
+    @include opacity(.4);
+}
+
 #{$rangeslider__fill} {
     background: #00ff00;
     position: absolute;
@@ -54,7 +58,6 @@ $rangeslider__handle:   ".rangeslider__handle";
 
     &:active {
         @include background-image(linear-gradient(rgba(black, .10), rgba(black, .12)));
-
     }
 }