read values from range/number inputs as numbers - fixes #436

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}`;
 }

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>
+		` );
+	}
+};

test/generator/samples/binding-input-number/main.html

@@ -0,0 +1,2 @@
+<input type='number' bind:value='count'>
+<p>{{typeof count}} {{count}}</p>

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>
+		` );
+	}
+};

test/generator/samples/binding-input-range/main.html

@@ -0,0 +1,2 @@
+<input type='range' bind:value='count'>
+<p>{{typeof count}} {{count}}</p>