From b162c443dbe12925e588e26ef2338983775e600e Mon Sep 17 00:00:00 2001
From: Timi Omoyeni <omoyenitimi@gmail.com>
Date: Tue, 6 Oct 2020 23:47:09 +0100
Subject: [PATCH 1/2] add `pinPadding` to template

The *200px* in the paragraph is supposed to change depending on the value of `pinPadding`.
---
 src/guide/custom-directive.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md
index 60fb55402d..e1e5d3f292 100644
--- a/src/guide/custom-directive.md
+++ b/src/guide/custom-directive.md
@@ -140,7 +140,7 @@ Our custom directive is now flexible enough to support a few different use cases
 <div id="dynamicexample">
   <h2>Scroll down the page</h2>
   <input type="range" min="0" max="500" v-model="pinPadding">
-  <p v-pin:[direction]="pinPadding">Stick me 200px from the {{ direction }} of the page</p>
+  <p v-pin:[direction]="pinPadding">Stick me {{ pinPadding }} from the {{ direction }} of the page</p>
 </div>
 ```
 

From f00cac821c57ed4bdc230c697a1b5c129de626a6 Mon Sep 17 00:00:00 2001
From: Timi Omoyeni <omoyenitimi@gmail.com>
Date: Tue, 6 Oct 2020 23:52:00 +0100
Subject: [PATCH 2/2] add 'px' to `pinPadding`

---
 src/guide/custom-directive.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md
index e1e5d3f292..7ee4ae33eb 100644
--- a/src/guide/custom-directive.md
+++ b/src/guide/custom-directive.md
@@ -140,7 +140,7 @@ Our custom directive is now flexible enough to support a few different use cases
 <div id="dynamicexample">
   <h2>Scroll down the page</h2>
   <input type="range" min="0" max="500" v-model="pinPadding">
-  <p v-pin:[direction]="pinPadding">Stick me {{ pinPadding }} from the {{ direction }} of the page</p>
+  <p v-pin:[direction]="pinPadding">Stick me {{ pinPadding + 'px' }} from the {{ direction }} of the page</p>
 </div>
 ```