Add Comparison Sliders

1 files changed, 24 insertions, 0 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 5a5cdec..6ad8dc3 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -57,6 +57,9 @@
                 <a href="experimentals.html#carousels">Carousels</a>
               </li>
               <li class="nav-item">
+                <a href="experimentals.html#comparison">Comparison slider</a>
+              </li>
+              <li class="nav-item">
                 <a href="experimentals.html#meters">Meters</a>
               </li>
               <li class="nav-item">
@@ -310,6 +313,27 @@
 
         </section>
 
+        <section id="comparison" class="container">
+          <header class="text-center"><h3>Comparison Sliders</h3></header>
+          <section class="notes">
+            <p><strong>Comparison Sliders</strong> are sliders for comparing two images. It is built in pure CSS.</p>
+          </section>
+          <div class="columns">
+            <div class="column col-12">
+              <div class="comparison-slider">
+                <figure class="comparison-before">
+                  <img src="img/macos-sierra.jpg" class="rounded" alt="macOS Sierra Wallpaper" />
+                </figure>
+                <figure class="comparison-after">
+                  <img src="img/macos-sierra.jpg" class="filter-grayscale rounded" alt="macOS Sierra Wallpaper" />
+                  <textarea class="comparison-resizer" readonly cols="0" rows="0"></textarea>
+                </figure>
+              </div>
+            </div>
+          </div>
+
+        </section>
+
         <section id="meters" class="container">
           <header class="text-center"><h3>Meters</h3></header>
           <section class="notes">