diff --git a/documentation/examples-content/from-center.php b/documentation/examples-content/from-center.php
index ee998d2..59ddf4b 100644
--- a/documentation/examples-content/from-center.php
+++ b/documentation/examples-content/from-center.php
@@ -5,12 +5,19 @@
 
     <div class="view">
 
-        <p><a href="https://github.com/leongersen/noUiSlider/issues/371">Issue #371</a> requested a slider with the connect option originating from the slider center.</p>
-
-        <p>An example of how to implement this is <a href="https://jsfiddle.net/leongersen/9hyfv0bw/11/">available as a JSFiddle</a>.</p>
+        <p><a href="https://github.com/leongersen/noUiSlider/issues/371">Issue #371</a> requested a slider with the connect option originating from the slider center.
+            This can be implemented by hiding one of the handles and using the <code>"unconstrained"</code> behaviour.</p>
 
+        <div class="example">
+            <div id="from-center"></div>
+            <?php run('from-center'); ?>
+            <?php run('from-center'); ?>
+        </div>
     </div>
 
     <div class="side">
+
+        <?php loadShowCSS('from-center'); ?>
+        <?php code('from-center'); ?>
     </div>
 </section>
diff --git a/documentation/examples/from-center.css b/documentation/examples/from-center.css
new file mode 100644
index 0000000..46126fe
--- /dev/null
+++ b/documentation/examples/from-center.css
@@ -0,0 +1,3 @@
+#from-center .noUi-handle[data-handle="0"] {
+    display: none;
+}
diff --git a/documentation/examples/from-center.js b/documentation/examples/from-center.js
new file mode 100644
index 0000000..9289219
--- /dev/null
+++ b/documentation/examples/from-center.js
@@ -0,0 +1,11 @@
+var fromCenterSlider = document.getElementById('from-center');
+
+noUiSlider.create(fromCenterSlider, {
+    start: [50, 80],
+    behaviour: 'unconstrained',
+    connect: true,
+    range: {
+        'min': 0,
+        'max': 100
+    }
+});