ADD: Sliders experimental component

1 files changed, 22 insertions, 0 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 9738f87..38b99d0 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -62,6 +62,9 @@
                   <li class="nav-item">
                     <a href="experimentals.html#progress">Progress</a>
                   </li>
+                  <li class="nav-item">
+                    <a href="experimentals.html#sliders">Sliders</a>
+                  </li>
                 </ul>
               </li>
             </ul>
@@ -115,6 +118,25 @@
 </pre>
         </section>
 
+        <section id="sliders" class="container">
+          <header class="text-center"><h3>Sliders</h3></header>
+          <section class="notes">
+            <p><strong>Sliders</strong> are for selecting values from ranges.</p>
+          </section>
+          <div class="columns text-center">
+            <div class="column col-6 col-xs-12">
+              <input class="slider" type="range" min="0" max="100" value="50" />
+            </div>
+          </div>
+          <section class="notes">
+            <p></p>
+          </section>
+<!-- sliders example -->
+<pre>
+<code class="code lang-html" data-lang="HTML">&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;slider&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;range&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;50&quot;</span> <span class="tag">/</span>&gt;</code>
+</pre>
+        </section>
+
         <section class="container">
           <div class="divider"></div>
           <ul class="pagination">