Add more styling examples (#1160)

documentation/assets/base.css

@@ -366,6 +366,11 @@
 		padding: 5px;
 	}
 
+	.style-head {
+		font-size: 0.6rem;
+		display: block;
+		margin-bottom: 10px;
+	}
 
 @media ( min-width: 800px ) {
 

documentation/examples-content/styling.php

@@ -10,23 +10,39 @@
 
         <p>When the slider handles are restyled to be smaller, <code>.noUi-touch-area</code> should be styled to be larger, to be easier to click or touch. The sliders in this example show the larger touch area when hovered.</p>
 
+        <p><code>padding</code> can be added to <code>.noUi-target</code> to contain handles within the slider's width.</p>
+
         <p>See <a href="/nouislider/more/#section-styling">the documentation on styling</a> for further tips and an overview of classes.</p>
 
         <div class="example">
-            <div class="slider-styled" id="slider-round"></div>
-            <div class="slider-styled" id="slider-square" style="margin-top: 30px"></div>
+            <strong class="style-head">Default styling</strong>
+            <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">Rounded styling</strong>
+            <div style="margin-bottom: 30px;" class="slider-styled" id="slider-round"></div>
+            <strong class="style-head">Square styling</strong>
+            <div class="slider-styled" id="slider-square"></div>
             <?php run('styling'); ?>
         </div>
     </div>
 
     <div class="side">
 
 <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 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">Basic styling</div>
+        <div class="viewer-header">Fit handles withing the slider</div>
+
+        <div class="viewer-content">
+            <?php loadShowCSS('styling-fit'); ?>
+        </div>
+
+        <div class="viewer-header">Style resets</div>
 
         <div class="viewer-content">
             <?php loadShowCSS('styling'); ?>

documentation/examples/styling-fit.css

@@ -0,0 +1,3 @@
+#slider-fit {
+    padding: 0 16px;
+}

documentation/examples/styling.js

@@ -1,3 +1,25 @@
+var slider = document.getElementById('slider');
+
+noUiSlider.create(slider, {
+    start: [0, 100],
+    connect: true,
+    range: {
+        'min': 0,
+        'max': 100
+    }
+});
+
+var sliderFit = document.getElementById('slider-fit');
+
+noUiSlider.create(sliderFit, {
+    start: [0, 100],
+    connect: true,
+    range: {
+        'min': 0,
+        'max': 100
+    }
+});
+
 var roundSlider = document.getElementById('slider-round');
 
 noUiSlider.create(roundSlider, {

documentation/more.php

@@ -162,8 +162,6 @@
 		<p>If your styling system doesn't match the convention in noUiSlider, the <code>cssPrefix</code> and <code>cssClasses</code> options can be used to reconfigure the markup.</p>
 
         <p>Alternatively, to modify the default classes for all sliders, a modifiable reference to the default class list is available as <code>noUiSlider.cssClasses</code>.</p>
-
-        <p>When adding padding to <code>.noUi-target</code>, <code>.noUi-connect</code> elements don't fill the slider width. This can be fixed by increasing the size of <code>.noUi-connects</code>.</p>
 	</div>
 
 	<div class="side">
@@ -216,12 +214,6 @@
 			</table>
 		</div>
 
-		<div class="viewer-header">Add padding to slider base</div>
-
-		<div class="viewer-content">
-			<?php showCSS('padding'); ?>
-		</div>
-
 		<div class="viewer-header">Overriding classes</div>
 
 		<div class="viewer-content">