From f73551d0ef51673bf676d05d595888f1c3ec44d2 Mon Sep 17 00:00:00 2001
From: "l.gersen@visymo.com" <leongersen@gmail.com>
Date: Wed, 24 Apr 2019 11:54:07 +0200
Subject: [PATCH] Fix #966

---
 documentation/more.php         |  2 +-
 documentation/more/padding.css | 17 +++--------------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/documentation/more.php b/documentation/more.php
index 18dbe0c0..26b45b3a 100644
--- a/documentation/more.php
+++ b/documentation/more.php
@@ -160,7 +160,7 @@
 
 		<p>If your styling system doesn't match the convention in noUiSlider, you can use the <code>cssPrefix</code> and <code>cssClasses</code> options to reconfigure the markup.</p>
 
-		<p>noUiSlider listens to events on the <code>.noUi-base</code> element. To add padding on the <code>.noUi-target</code> element and contain handles within the slider width, <code>.noUi-base</code> needs to be extended. This can be done using CSS <code>:before</code> and <code>:after</code> pseudo-elements. An example is included to the right.</p>
+        <p>When adding padding to <code>.noUi-target</code>, you'll notice the <code>.noUi-connect</code> elements don't fill the slider width. This can be fixed by increasing the size of <code>.noUi-connects</code>. An example is included to the right.</p>
 	</div>
 
 	<div class="side">
diff --git a/documentation/more/padding.css b/documentation/more/padding.css
index 8d9c8fbb..f1777957 100644
--- a/documentation/more/padding.css
+++ b/documentation/more/padding.css
@@ -1,18 +1,7 @@
 .noUi-target {
     padding: 0 17px;
 }
-.noUi-base:before,
-.noUi-base:after {
-    width: 17px;
-    content: "";
-    position: absolute;
-    top: 0;
-    height: 100%;
-    display: block;
-}
-.noUi-base:before {
-    left: -17px;
-}
-.noUi-base:after {
-    left: 100%;
+.noUi-connects {
+    margin: 0 -17px;
+    width: calc(100% + 34px);
 }