From 7ff2865c51de36696281e70136f66663fa13461e Mon Sep 17 00:00:00 2001
From: lgersen <l.gersen@visymo.com>
Date: Sun, 29 Oct 2023 15:43:50 +0100
Subject: [PATCH] Show how to style handles to not overlap #1259

---
 documentation/examples-content/styling.php    |  9 +++++++++
 documentation/examples/styling-no-overlap.css |  6 ++++++
 documentation/examples/styling.js             | 11 +++++++++++
 3 files changed, 26 insertions(+)
 create mode 100644 documentation/examples/styling-no-overlap.css

diff --git a/documentation/examples-content/styling.php b/documentation/examples-content/styling.php
index 319f8310..38c302f6 100644
--- a/documentation/examples-content/styling.php
+++ b/documentation/examples-content/styling.php
@@ -19,6 +19,8 @@
             <div style="margin-bottom: 30px;" id="slider"></div>
             <strong class="style-head">Fit handles within slider</strong>
             <div style="margin-bottom: 30px;" id="slider-fit"></div>
+            <strong class="style-head">Don't overlap handles</strong>
+            <div style="margin-bottom: 30px;" id="slider-no-overlap"></div>
             <strong class="style-head">Rounded styling</strong>
             <div style="margin-bottom: 30px;" class="slider-styled" id="slider-round"></div>
             <strong class="style-head">Square styling</strong>
@@ -32,10 +34,17 @@
 <pre><code>
 &lt;div id=&quot;slider&quot;&gt;&lt;/div&gt;
 &lt;div id=&quot;slider-fit&quot;&gt;&lt;/div&gt;
+&lt;div id=&quot;slider-no-overlap&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;slider-styled&quot; id=&quot;slider-round&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;slider-styled&quot; id=&quot;slider-square&quot;&gt;&lt;/div&gt;
 </code></pre>
 
+        <div class="viewer-header">Don't overlap handles</div>
+
+        <div class="viewer-content">
+            <?php loadShowCSS('styling-no-overlap'); ?>
+        </div>
+
         <div class="viewer-header">Fit handles withing the slider</div>
 
         <div class="viewer-content">
diff --git a/documentation/examples/styling-no-overlap.css b/documentation/examples/styling-no-overlap.css
new file mode 100644
index 00000000..7facbfbf
--- /dev/null
+++ b/documentation/examples/styling-no-overlap.css
@@ -0,0 +1,6 @@
+#slider-no-overlap .noUi-handle-lower {
+    right: 0;
+}
+#slider-no-overlap .noUi-handle-upper {
+    right: -34px;
+}
diff --git a/documentation/examples/styling.js b/documentation/examples/styling.js
index caeb00a2..91f14fc4 100644
--- a/documentation/examples/styling.js
+++ b/documentation/examples/styling.js
@@ -9,6 +9,17 @@ noUiSlider.create(slider, {
     }
 });
 
+var sliderNoOverlap = document.getElementById('slider-no-overlap');
+
+noUiSlider.create(sliderNoOverlap, {
+    start: [50, 50],
+    connect: true,
+    range: {
+        'min': 0,
+        'max': 100
+    }
+});
+
 var sliderFit = document.getElementById('slider-fit');
 
 noUiSlider.create(sliderFit, {