Show how to style handles to not overlap #1259

leongersen · Oct 29, 2023 · 7ff2865 · 7ff2865
1 parent 7ace401
commit 7ff2865
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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, {