From bc93465416ecbf4257e07d73e92457f6d254003b Mon Sep 17 00:00:00 2001
From: gtm-nayan <gtmnayan@gmail.com>
Date: Thu, 10 Mar 2022 10:51:59 +0545
Subject: [PATCH] Fix statement about order of bind: and on:

---
 site/content/docs/02-template-syntax.md | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index f80ddfee05..37faab7537 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -627,20 +627,31 @@ On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`
 
 ---
 
-`bind:` can be used together with `on:` directives. The order that they are defined in determines the value of the bound variable when the event handler is called.
+Bindings use event handlers internally to sync the values. The event that is listened for will differ based on the element and the type of binding used. Therefore, the order of `bind:` and `on:` directives can have consequences.
 
 ```sv
 <script>
-	let value = 'Hello World';
+	let value = 50;
+	
+	$: console.log("2nd", value)
 </script>
 
-<input
-	on:input="{() => console.log('Old value:', value)}"
-	bind:value
-	on:input="{() => console.log('New value:', value)}"
-/>
+
+<div on:input="{() => console.log('4th', value)}">
+	<!--bind:value on range inputs listens to the 'input' event-->
+	<input
+		type="range"
+
+		on:change="{() => console.log('5th', value)}"
+		
+		on:input="{() => console.log('1st', value)}"
+		bind:value
+		on:input="{() => console.log('3rd', value)}"
+	/>
+</div>
 ```
 
+The `1st` input handler will be called before the binding updates the value, so it'll log the old value, whereas `3rd` will log the new value. However, the `change` event only fires when you let go of the slider, so even though the change handler is declared before the input handlers, it'll always be triggered last.
 
 ##### Binding `<select>` value