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
jdan · May 7, 2020 · 1e004ff · 1e004ff · vercel · May 7, 2020
1 parent a040540
commit 1e004ff
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 0 deletions.
diff --git a/docs/index.html.ejs b/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>

diff --git a/icon/indicator-horizontal.svg b/icon/indicator-horizontal.svg
diff --git a/icon/indicator-rectangle-horizontal.svg b/icon/indicator-rectangle-horizontal.svg
diff --git a/style.css b/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);