Merge pull request #128 from andreruffert/release-1.0.0

Release 1.0.0

README.md

@@ -1,7 +1,7 @@
-#rangeslider.js
+# 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/) [![Build Status](https://travis-ci.org/andreruffert/rangeslider.js.svg?branch=develop)](https://travis-ci.org/andreruffert/rangeslider.js) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/andreruffert/rangeslider.js)
 
->Simple, small and fast JavaScript/jQuery polyfill for the HTML5 `<input type="range">` slider element.
+> Simple, small and fast JavaScript/jQuery polyfill for the HTML5 `<input type="range">` slider element.
 
 Check out the [examples](http://andreruffert.github.io/rangeslider.js/).
 
@@ -10,14 +10,14 @@ Check out the [examples](http://andreruffert.github.io/rangeslider.js/).
 * Small and fast
 * Supports all major browsers including IE8+
 
-##Install
+## Install
 Install with [Bower](http://bower.io/):
 ``bower install --save rangeslider.js``
 
 Install with [npm](https://www.npmjs.org/):
 ``npm install --save rangeslider.js``
 
-##Usage
+## Usage
 
 ```
 // Initialize a new plugin instance for all

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "rangeslider.js",
-  "version": "0.3.9",
+  "version": "1.0.0",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "authors": [
     "André Ruffert <[email protected]>"

dist/rangeslider.js

@@ -1,4 +1,4 @@
-/*! rangeslider.js - v0.3.9 | (c) 2015 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
+/*! rangeslider.js - v1.0.0 | (c) 2015 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
 (function(factory) {
     'use strict';
 
@@ -207,15 +207,15 @@
 
         // Attach Events
         var _this = this;
-        this.$window.on('resize' + '.' + this.identifier, debounce(function() {
+        this.$window.on('resize.' + this.identifier, debounce(function() {
             // Simulate resizeEnd event.
             delay(function() { _this.update(); }, 300);
         }, 20));
 
         this.$document.on(this.startEvent, '#' + this.identifier + ':not(.' + this.options.disabledClass + ')', this.handleDown);
 
         // Listen to programmatic value changes
-        this.$element.on('change' + '.' + this.identifier, function(e, data) {
+        this.$element.on('change.' + this.identifier, function(e, data) {
             if (data && data.origin === _this.identifier) {
                 return;
             }
@@ -282,6 +282,9 @@
         this.$document.off(this.moveEvent, this.handleMove);
         this.$document.off(this.endEvent, this.handleEnd);
 
+        // Ok we're done fire the change event
+        this.$element.trigger('change', { origin: this.identifier });
+
         if (this.onSlideEnd && typeof this.onSlideEnd === 'function') {
             this.onSlideEnd(this.position, this.value);
         }
@@ -360,9 +363,14 @@
     };
 
     Plugin.prototype.setValue = function(value) {
-        if (value !== this.value) {
-            this.$element.val(value).trigger('change', {origin: this.identifier});
+        if (value === this.value) {
+            return;
         }
+
+        // Set the new value and fire the `input` event
+        this.$element
+            .val(value)
+            .trigger('input', { origin: this.identifier });
     };
 
     Plugin.prototype.destroy = function() {

example/index.html

@@ -169,7 +169,7 @@ <h2>Combination with native <code>&lt;details&gt;</code> element</h2>
         for (var i = $element.length - 1; i >= 0; i--) {
             valueOutput($element[i]);
         };
-        $document.on('change', 'input[type="range"]', function(e) {
+        $document.on('input', 'input[type="range"]', function(e) {
             valueOutput(e.target);
         });
 

package.json

@@ -2,8 +2,8 @@
   "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.9",
-  "codename": "Periwinkle",
+  "version": "1.0.0",
+  "codename": "Peach",
   "main": "dist/rangeslider.js",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "author": {
@@ -51,4 +51,4 @@
   "scripts": {
     "test": "grunt jshint"
   }
-}
+}

src/rangeslider.js

@@ -206,15 +206,15 @@
 
         // Attach Events
         var _this = this;
-        this.$window.on('resize' + '.' + this.identifier, debounce(function() {
+        this.$window.on('resize.' + this.identifier, debounce(function() {
             // Simulate resizeEnd event.
             delay(function() { _this.update(); }, 300);
         }, 20));
 
         this.$document.on(this.startEvent, '#' + this.identifier + ':not(.' + this.options.disabledClass + ')', this.handleDown);
 
         // Listen to programmatic value changes
-        this.$element.on('change' + '.' + this.identifier, function(e, data) {
+        this.$element.on('change.' + this.identifier, function(e, data) {
             if (data && data.origin === _this.identifier) {
                 return;
             }
@@ -281,6 +281,9 @@
         this.$document.off(this.moveEvent, this.handleMove);
         this.$document.off(this.endEvent, this.handleEnd);
 
+        // Ok we're done fire the change event
+        this.$element.trigger('change', { origin: this.identifier });
+
         if (this.onSlideEnd && typeof this.onSlideEnd === 'function') {
             this.onSlideEnd(this.position, this.value);
         }
@@ -359,9 +362,14 @@
     };
 
     Plugin.prototype.setValue = function(value) {
-        if (value !== this.value) {
-            this.$element.val(value).trigger('change', {origin: this.identifier});
+        if (value === this.value) {
+            return;
         }
+
+        // Set the new value and fire the `input` event
+        this.$element
+            .val(value)
+            .trigger('input', { origin: this.identifier });
     };
 
     Plugin.prototype.destroy = function() {