Add styling examples

documentation/examples-content/styling.php

@@ -0,0 +1,53 @@
+<?php sect('styling'); ?>
+<h1>Styling</h1>
+
+<section>
+
+    <div class="view">
+        <p>noUiSlider, by default, comes with a design with large handles and box shadows. In general, larger handles make range sliders easier to use on mobile devices and touch screens.</p>
+
+        <p>It is recommended to use the default stylesheet, overriding where necessary, as a starting point when re-styling noUiSlider.</p>
+
+        <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>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>
+            <?php run('styling'); ?>
+        </div>
+    </div>
+
+    <div class="side">
+
+<pre><code>
+&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-content">
+            <?php loadShowCSS('styling'); ?>
+        </div>
+
+        <div class="viewer-header">Styling the touch area</div>
+
+        <div class="viewer-content">
+            <?php loadShowCSS('styling-touch-area'); ?>
+        </div>
+
+        <div class="viewer-header">Styling round slider</div>
+
+        <div class="viewer-content">
+            <?php loadShowCSS('styling-round'); ?>
+        </div>
+
+        <div class="viewer-header">Styling square slider</div>
+
+        <div class="viewer-content">
+            <?php loadShowCSS('styling-square'); ?>
+        </div>
+    </div>
+</section>

documentation/examples.php

@@ -7,6 +7,7 @@
 <section>
 	<ul>
 		<li><a href="#section-colorpicker">Color picker</a></li>
+		<li><a href="#section-styling">Styling</a></li>
 		<li><a href="#section-dates">Using dates</a></li>
 		<li><a href="#section-merging-tooltips">Merging overlapping tooltips</a></li>
 		<li><a href="#section-html5">Working with HTML5 input types</a></li>
@@ -29,6 +30,7 @@
 </section>
 
 <?php include 'examples-content/colorpicker.php'; ?>
+<?php include 'examples-content/styling.php'; ?>
 <?php include 'examples-content/dates.php'; ?>
 <?php include 'examples-content/merging-tooltips.php'; ?>
 <?php include 'examples-content/html5.php'; ?>

documentation/examples/styling-round.css

@@ -0,0 +1,15 @@
+#slider-round {
+    height: 10px;
+}
+
+#slider-round .noUi-connect {
+    background: #c0392b;
+}
+
+#slider-round .noUi-handle {
+    height: 18px;
+    width: 18px;
+    top: -5px;
+    right: -9px; /* half the width */
+    border-radius: 9px;
+}

documentation/examples/styling-square.css

@@ -0,0 +1,12 @@
+#slider-square {
+    border-radius: 0;
+}
+
+#slider-square .noUi-handle {
+    border-radius: 0;
+    background: #2980b9;
+    height: 18px;
+    width: 18px;
+    top: -1px;
+    right: -9px;
+}

documentation/examples/styling-touch-area.css

@@ -0,0 +1,15 @@
+.slider-styled .noUi-handle:hover .noUi-touch-area {
+    border: 1px solid transparent;
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    width: auto;
+    height: auto;
+}
+
+/* Show a border when hovering the area the handle responds to */
+.slider-styled .noUi-handle:hover .noUi-touch-area {
+    border: 1px dashed #7f7f7f;
+}

documentation/examples/styling.css

@@ -0,0 +1,10 @@
+.slider-styled,
+.slider-styled .noUi-handle {
+    box-shadow: none;
+}
+
+/* Hide markers on slider handles */
+.slider-styled .noUi-handle::before,
+.slider-styled .noUi-handle::after {
+    display: none;
+}

documentation/examples/styling.js

@@ -0,0 +1,20 @@
+var roundSlider = document.getElementById('slider-round');
+
+noUiSlider.create(roundSlider, {
+    start: 50,
+    connect: 'lower',
+    range: {
+        'min': 0,
+        'max': 100
+    }
+});
+
+var squareSlider = document.getElementById('slider-square');
+
+noUiSlider.create(squareSlider, {
+    start: 50,
+    range: {
+        'min': 0,
+        'max': 100
+    }
+});