Merge pull request #766 from sveltejs/gh-740

bind to change events for range inputs, as well as input events

Author: Rich-Harris

src/generators/dom/visitors/Element/Binding.ts

@@ -156,9 +156,26 @@ export default function visitBinding(
 		}
 	`);
 
-	block.builders.hydrate.addBlock(
-		`@addListener( ${state.parentNode}, '${eventName}', ${handler} );`
-	);
+	if (node.name === 'input' && type === 'range') {
+		// need to bind to `input` and `change`, for the benefit of IE
+		block.builders.hydrate.addBlock(deindent`
+			@addListener( ${state.parentNode}, 'input', ${handler} );
+			@addListener( ${state.parentNode}, 'change', ${handler} );
+		`);
+
+		block.builders.destroy.addBlock(deindent`
+			@removeListener( ${state.parentNode}, 'input', ${handler} );
+			@removeListener( ${state.parentNode}, 'change', ${handler} );
+		`);
+	} else {
+		block.builders.hydrate.addLine(
+			`@addListener( ${state.parentNode}, '${eventName}', ${handler} );`
+		);
+
+		block.builders.destroy.addLine(
+			`@removeListener( ${state.parentNode}, '${eventName}', ${handler} );`
+		);
+	}
 
 	if (node.name !== 'audio' && node.name !== 'video') {
 		node.initialUpdate = updateElement;
@@ -174,10 +191,6 @@ export default function visitBinding(
 		`);
 	}
 
-	block.builders.destroy.addLine(
-		`@removeListener( ${state.parentNode}, '${eventName}', ${handler} );`
-	);
-
 	if (attribute.name === 'paused') {
 		block.builders.create.addLine(
 			`@addListener( ${state.parentNode}, 'play', ${handler} );`

test/runtime/samples/binding-input-range-change/_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( 'change' );
+
+		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/runtime/samples/binding-input-range-change/main.html

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