From 5c10dea6c9ea3b38838c4f3378ff3b6bdaa881cd Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 2 Apr 2017 17:44:00 -0400
Subject: [PATCH] read values from range/number inputs as numbers - fixes #436

---
 .../visitors/attributes/addElementBinding.js  |  5 +++
 .../samples/binding-input-number/_config.js   | 33 +++++++++++++++++++
 .../samples/binding-input-number/main.html    |  2 ++
 .../samples/binding-input-range/_config.js    | 33 +++++++++++++++++++
 .../samples/binding-input-range/main.html     |  2 ++
 5 files changed, 75 insertions(+)
 create mode 100644 test/generator/samples/binding-input-number/_config.js
 create mode 100644 test/generator/samples/binding-input-number/main.html
 create mode 100644 test/generator/samples/binding-input-range/_config.js
 create mode 100644 test/generator/samples/binding-input-range/main.html

diff --git a/src/generators/dom/visitors/attributes/addElementBinding.js b/src/generators/dom/visitors/attributes/addElementBinding.js
index a13d254dfb..e8a049570e 100644
--- a/src/generators/dom/visitors/attributes/addElementBinding.js
+++ b/src/generators/dom/visitors/attributes/addElementBinding.js
@@ -144,6 +144,11 @@ function getBindingValue ( generator, local, node, attribute, isMultipleSelect,
 		return `${local.name}.__value`;
 	}
 
+	// <input type='range|number' bind:value>
+	if ( type === 'range' || type === 'number' ) {
+		return `+${local.name}.${attribute.name}`;
+	}
+
 	// everything else
 	return `${local.name}.${attribute.name}`;
 }
diff --git a/test/generator/samples/binding-input-number/_config.js b/test/generator/samples/binding-input-number/_config.js
new file mode 100644
index 0000000000..35ab5375a2
--- /dev/null
+++ b/test/generator/samples/binding-input-number/_config.js
@@ -0,0 +1,33 @@
+export default {
+	data: {
+		count: 42
+	},
+
+	html: `
+		<input type='number'>
+		<p>number 42</p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const input = target.querySelector( 'input' );
+		assert.equal( input.value, '42' );
+
+		const event = new window.Event( 'input' );
+
+		input.value = '43';
+		input.dispatchEvent( event );
+
+		assert.equal( component.get( 'count' ), 43 );
+		assert.htmlEqual( target.innerHTML, `
+			<input type='number'>
+			<p>number 43</p>
+		` );
+
+		component.set({ count: 44 });
+		assert.equal( input.value, '44' );
+		assert.htmlEqual( target.innerHTML, `
+			<input type='number'>
+			<p>number 44</p>
+		` );
+	}
+};
diff --git a/test/generator/samples/binding-input-number/main.html b/test/generator/samples/binding-input-number/main.html
new file mode 100644
index 0000000000..12b0bae263
--- /dev/null
+++ b/test/generator/samples/binding-input-number/main.html
@@ -0,0 +1,2 @@
+<input type='number' bind:value='count'>
+<p>{{typeof count}} {{count}}</p>
diff --git a/test/generator/samples/binding-input-range/_config.js b/test/generator/samples/binding-input-range/_config.js
new file mode 100644
index 0000000000..c1ff309e2f
--- /dev/null
+++ b/test/generator/samples/binding-input-range/_config.js
@@ -0,0 +1,33 @@
+export default {
+	data: {
+		count: 42
+	},
+
+	html: `
+		<input type='range'>
+		<p>number 42</p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const input = target.querySelector( 'input' );
+		assert.equal( input.value, '42' );
+
+		const event = new window.Event( 'input' );
+
+		input.value = '43';
+		input.dispatchEvent( event );
+
+		assert.equal( component.get( 'count' ), 43 );
+		assert.htmlEqual( target.innerHTML, `
+			<input type='range'>
+			<p>number 43</p>
+		` );
+
+		component.set({ count: 44 });
+		assert.equal( input.value, '44' );
+		assert.htmlEqual( target.innerHTML, `
+			<input type='range'>
+			<p>number 44</p>
+		` );
+	}
+};
diff --git a/test/generator/samples/binding-input-range/main.html b/test/generator/samples/binding-input-range/main.html
new file mode 100644
index 0000000000..bedf924f98
--- /dev/null
+++ b/test/generator/samples/binding-input-range/main.html
@@ -0,0 +1,2 @@
+<input type='range' bind:value='count'>
+<p>{{typeof count}} {{count}}</p>