From d53446cb7e2bc35c0e6a49f259321a423120b0ae Mon Sep 17 00:00:00 2001
From: lgersen <l.gersen@visymo.com>
Date: Fri, 21 Jun 2024 16:14:14 +0200
Subject: [PATCH] Better example for center-fixed sliders

---
 documentation/examples-content/from-center.php | 13 ++++++++++---
 documentation/examples/from-center.css         |  3 +++
 documentation/examples/from-center.js          | 11 +++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 documentation/examples/from-center.css
 create mode 100644 documentation/examples/from-center.js

diff --git a/documentation/examples-content/from-center.php b/documentation/examples-content/from-center.php
index ee998d22..59ddf4b1 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 00000000..46126fec
--- /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 00000000..9289219f
--- /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
+    }
+});