Better example for center-fixed sliders

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>

documentation/examples/from-center.css

@@ -0,0 +1,3 @@
+#from-center .noUi-handle[data-handle="0"] {
+    display: none;
+}

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