Add slider (#78)

* Add section in docs

* Hide range input on all browsers

Displays indicator as radio outline on Windows 10 Firefox 75

* Add svg icons

* Add thumb styling on range input

* Add track to range input

* Add indicator css for has-recatangular-indicator

* Update styling and labels for range input

* Update example for simple range input

* Remove repeated code

* Remove unused icon and add vertical input style

* Refactor styling and adapt description to fit

* Add style for all vertical lengths and update docs

* Correct 2x to 2px

docs/index.html.ejs

@@ -30,6 +30,7 @@
           <li><a href="#option-button">OptionButton</a></li>
           <li><a href="#group-box">GroupBox</a></li>
           <li><a href="#text-box">TextBox</a></li>
+          <li><a href="#slider">Slider</a></li>
           <li><a href="#dropdown">Dropdown</a></li>
           <li>
             <a href="#window">Window</a>
@@ -390,6 +391,53 @@
       </div>
     </section>
 
+    <section class="component">
+      <h3 id="slider">Slider</h3>
+      <div>
+        <blockquote>
+          A <em>slider</em>, sometimes called a trackbar control, consists of a bar that
+          defines the extent or range of the adjustment and an indicator that
+          shows the current value for the control...
+
+          <footer>&mdash; Microsoft Windows User Experience p. 146</footer>
+        </blockquote>
+
+        <p>
+          Sliders can rendered by specifying a <code>range</code> type on an
+          <code>input</code> element.
+        </p>
+
+        <%- example(`
+          <div class="field-row" style="width: 300px">
+            <label for="range${getNewId()}">Volume:</label>
+            <label for="range${getNewId()}">Low</label>
+            <input id="range${getCurrentId()}" type="range" min="1" max="11" value="5" />
+            <label for="range${getNewId()}">High</label>
+          </div>
+        `) %>
+
+        <p>
+          You can make use of the <code>has-box-indicator</code> class replace the
+          default indicator with a box indicator, furthermore the slider can be wrapped
+          with a <code>div</code> using <code>is-vertical</code> to display the input vertically.
+        </p>
+
+        <p>
+          Note: To change the length of a vertical slider, the <code>input</code> width
+          and <code>div</code> height.
+        </p>
+
+        <%- example(`
+          <div class="field-row">
+            <label for="range${getNewId()}">Cowbell</label>
+            <div class="is-vertical">
+              <input id="range${getCurrentId()}" class="has-box-indicator" type="range" min="1" max="3" step="1" value="2" />
+            </div>
+          </div>
+        `) %>
+      </div>
+    </section>
+
     <section class="component">
       <h3 id="dropdown">Dropdown</h3>
       <div>

icon/indicator-horizontal.svg

@@ -0,0 +1,6 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z" fill="#C0C7C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V16H8V18H6V20H5V19H7V17H9Z" fill="#87888F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V16H9V18H7V20H5V21H6V19H8V17H10Z" fill="black"/>
+</svg>

icon/indicator-rectangle-horizontal.svg

@@ -0,0 +1,6 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z" fill="white"/>
+<rect x="1" y="1" width="8" height="18" fill="#C0C7C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V20H1V19H9Z" fill="#87888F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V21H0V20H10Z" fill="black"/>
+</svg>

style.css

@@ -22,6 +22,8 @@
   --radio-width: 12px;
   --checkbox-width: 13px;
   --radio-label-spacing: 6px;
+  --range-track-height: 4px;
+  --range-spacing: 10px;
 
   /* Some detailed computations for radio buttons and checkboxes */
   --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
@@ -429,6 +431,140 @@ textarea:focus {
   outline: none;
 }
 
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  background: transparent;
+}
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 21px;
+  width: 11px;
+  background: svg-load("./icon/indicator-horizontal.svg");
+  transform: translateY(-8px);
+}
+
+input[type=range].has-box-indicator::-webkit-slider-thumb {
+  background: svg-load("./icon/indicator-rectangle-horizontal.svg");
+  transform: translateY(-10px);
+}
+
+input[type=range]::-moz-range-thumb {
+  height: 21px;
+  width: 11px;
+  border: 0;
+  border-radius: 0;
+  background: svg-load("./icon/indicator-horizontal.svg");
+  transform: translateY(2px);
+}
+
+input[type=range].has-box-indicator::-moz-range-thumb {
+  background: svg-load("./icon/indicator-rectangle-horizontal.svg");
+  transform: translateY(0px);
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 2px;
+  box-sizing: border-box;
+  background: black;
+  border-right: 1px solid grey;
+  border-bottom: 1px solid grey;
+  box-shadow:
+    1px 0 0 white,
+    1px 1px 0 white,
+    0 1px 0 white,
+    -1px 0 0 darkgrey,
+    -1px -1px 0 darkgrey,
+    0 -1px 0 darkgrey,
+    -1px 1px 0 white,
+    1px -1px darkgrey;
+}
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 2px;
+  box-sizing: border-box;
+  background: black;
+  border-right: 1px solid grey;
+  border-bottom: 1px solid grey;
+  box-shadow:
+    1px 0 0 white,
+    1px 1px 0 white,
+    0 1px 0 white,
+    -1px 0 0 darkgrey,
+    -1px -1px 0 darkgrey,
+    0 -1px 0 darkgrey,
+    -1px 1px 0 white,
+    1px -1px darkgrey;
+}
+
+.is-vertical {
+  display: inline-block;
+  width: 4px;
+  height: 150px;
+  transform: translateY(50%) ;
+}
+
+.is-vertical > input[type=range] {
+  width: 150px;
+  height: 4px;
+  margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);
+  transform-origin: left;
+  transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing))) ;
+}
+
+.is-vertical > input[type=range]::-webkit-slider-runnable-track {
+  border-left: 1px solid grey;
+  border-right: 0;
+  border-bottom: 1px solid grey;
+  box-shadow:
+    -1px 0 0 white,
+    -1px 1px 0 white,
+    0 1px 0 white,
+    1px 0 0 darkgrey,
+    1px -1px 0 darkgrey,
+    0 -1px 0 darkgrey,
+    1px 1px 0 white,
+    -1px -1px darkgrey;
+}
+
+.is-vertical > input[type=range]::-moz-range-track {
+  border-left: 1px solid grey;
+  border-right: 0;
+  border-bottom: 1px solid grey;
+  box-shadow:
+    -1px 0 0 white,
+    -1px 1px 0 white,
+    0 1px 0 white,
+    1px 0 0 darkgrey,
+    1px -1px 0 darkgrey,
+    0 -1px 0 darkgrey,
+    1px 1px 0 white,
+    -1px -1px darkgrey;
+}
+
+.is-vertical > input[type=range]::-webkit-slider-thumb {
+  transform: translateY(-8px) scaleX(-1);
+}
+
+.is-vertical > input[type=range].has-box-indicator::-webkit-slider-thumb {
+  transform: translateY(-10px) scaleX(-1);
+}
+
+.is-vertical > input[type=range]::-moz-range-thumb {
+  transform: translateY(2px) scaleX(-1);
+}
+
+.is-vertical > input[type=range].has-box-indicator::-moz-range-thumb {
+  transform: translateY(0px) scaleX(-1);
+}
+
 select:focus {
   color: var(--button-highlight);
   background-color: var(--dialog-blue);