From faf106acd52e787afcb5cc182325796a9eb307f1 Mon Sep 17 00:00:00 2001
From: Simon Bauer <bauer-s-public@outlook.com>
Date: Sun, 30 Dec 2018 17:46:38 +0100
Subject: [PATCH] Added Slider // Released Version 0.1.8

---
 README.md                                    |   4 +-
 package.json                                 |   3 +-
 src/components/Overview.vue                  |  49 +++-
 src/components/Slider/OfficeSlider.styles.ts | 260 +++++++++++++++++++
 src/components/Slider/OfficeSlider.types.ts  |  78 ++++++
 src/components/Slider/OfficeSlider.vue       | 239 +++++++++++++++++
 src/utility/css.ts                           |  53 ++++
 7 files changed, 674 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Slider/OfficeSlider.styles.ts
 create mode 100644 src/components/Slider/OfficeSlider.types.ts
 create mode 100644 src/components/Slider/OfficeSlider.vue
 create mode 100644 src/utility/css.ts

diff --git a/README.md b/README.md
index 863c23a..c734616 100644
--- a/README.md
+++ b/README.md
@@ -88,7 +88,9 @@ Take a look at the [Component Progress Issue](https://github.com/s-bauer/office-
 - [Link](https://developer.microsoft.com/en-us/fabric#/components/link)
     - Props: disabled, href
     - Info: `<button>` or `<a>` is exposed, so all events and props can be used
-
+- [Slider](https://developer.microsoft.com/en-us/fabric#/components/slider)
+    - Model: :value / @change
+    - Props: disabled, vertical, showValue, min, max, step, label
 
 ## CI / CD
 
diff --git a/package.json b/package.json
index 17332a7..be80eff 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "office-vue-fabric",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": false,
   "main": "dist/office-vue-fabric.umd.min.js",
+  "license": "MIT",
   "keywords": [
     "vue",
     "vuejs",
diff --git a/src/components/Overview.vue b/src/components/Overview.vue
index 4527fe0..bc3bc2f 100644
--- a/src/components/Overview.vue
+++ b/src/components/Overview.vue
@@ -17,15 +17,17 @@ import {ImageFit} from "./Image/OfficeImage.types";
             <div>
                 <OfficeCheckbox v-model="checkboxChecked" :disabled="disabled" label="Checkbox"
                                 style="display: inline-block"/>
-                <OfficeLabel :disabled="disabled" style="display: inline-block; margin-left: 50px;">The checkbox is {{ checkboxChecked ? "checked" : "not checked"}}</OfficeLabel>
+                <OfficeLabel :disabled="disabled" style="display: inline-block; margin-left: 50px;">The checkbox is {{
+                    checkboxChecked ? "checked" : "not checked"}}
+                </OfficeLabel>
             </div>
         </div>
 
         <div class="card">
             <h5>Buttons</h5>
             <div>
-                <OfficeButton label="Default Button" :disabled="disabled" :checked="checked" style="margin: 5px;"/>
-                <OfficeButton label="Primary Button" :primary="true" :disabled="disabled" :checked="checked"
+                <OfficeButton @click="clicked" label="Default Button" :disabled="disabled" :checked="checked" style="margin: 5px;"/>
+                <OfficeButton @click="clicked" label="Primary Button" :primary="true" :disabled="disabled" :checked="checked"
                               style="margin: 5px;"/>
             </div>
         </div>
@@ -75,20 +77,37 @@ import {ImageFit} from "./Image/OfficeImage.types";
 
         <div class="card">
             <h5>Toggle</h5>
-            <OfficeToggle :disabled="disabled" label="Normal Toggle" onText="on" offText="off" v-model="toggleChecked"></OfficeToggle>
-            <OfficeLabel :disabled="disabled" :required="required">Toggle: {{ toggleChecked ? 'on' : 'off' }}</OfficeLabel>
+            <OfficeToggle :disabled="disabled" label="Normal Toggle" onText="on" offText="off"
+                          v-model="toggleChecked"></OfficeToggle>
+            <OfficeLabel :disabled="disabled" :required="required">Toggle: {{ toggleChecked ? 'on' : 'off' }}
+            </OfficeLabel>
         </div>
 
         <div class="card">
             <h5>Links</h5>
-            A Link to <OfficeLink href="https://google.com">Google</OfficeLink>
+            A Link to
+            <OfficeLink href="https://google.com">Google</OfficeLink>
             <br>
-            Another link without href <OfficeLink @click="linkClicked">IS HERE</OfficeLink>
+            Another link without href
+            <OfficeLink @click="clicked">IS HERE</OfficeLink>
             <br>
-            And a <OfficeLink disabled>Disabled Link!</OfficeLink>
+            And a
+            <OfficeLink disabled>Disabled Link!</OfficeLink>
         </div>
 
-        <OfficeLabel style="margin-top: 30px">This is the demo page for <OfficeLink href="https://github.com/s-bauer/office-ui-fabric-vue">office-ui-fabric-vue</OfficeLink></OfficeLabel>
+        <div class="card">
+            <h5>Slider</h5>
+            <OfficeSlider :min="0" :max="10" v-model="sliderValue"></OfficeSlider>
+            <OfficeSlider :min="0" :max="10" v-model="sliderValue" showValue></OfficeSlider>
+            <OfficeSlider :min="0" :max="10" v-model="sliderValue" showValue disabled></OfficeSlider>
+            <OfficeSlider :min="0" :max="10" v-model="sliderValue" vertical showValue class="vertical-slider"></OfficeSlider>
+            <OfficeSlider :min="0" :max="10" v-model="sliderValue" vertical showValue disabled class="vertical-slider"></OfficeSlider>
+            <OfficeLabel>Value: {{sliderValue}}</OfficeLabel>
+        </div>
+
+        <OfficeLabel style="margin-top: 30px">This is the demo page for
+            <OfficeLink href="https://github.com/s-bauer/office-ui-fabric-vue">office-ui-fabric-vue</OfficeLink>
+        </OfficeLabel>
     </div>
 </template>
 
@@ -100,6 +119,7 @@ import {ImageFit} from "./Image/OfficeImage.types";
     import OfficeImage from "@/components/Image/OfficeImage.vue";
     import OfficeLabel from "@/components/Label/OfficeLabel.vue";
     import OfficeLink from "@/components/Link/OfficeLink.vue";
+    import OfficeSlider from "@/components/Slider/OfficeSlider.vue";
     import OfficeToggle from "@/components/Toggle/OfficeToggle.vue";
 
     import {Component, Prop, Vue} from "vue-property-decorator";
@@ -109,6 +129,7 @@ import {ImageFit} from "./Image/OfficeImage.types";
 
     @Component({
         components: {
+            OfficeSlider,
             OfficeLink,
             OfficeToggle,
             OfficeChoiceGroupOption,
@@ -138,7 +159,9 @@ import {ImageFit} from "./Image/OfficeImage.types";
 
         private checkboxChecked: boolean = false;
 
-        private linkClicked() {
+        private sliderValue: number = 50;
+
+        private clicked() {
             alert("clicked!");
         }
     }
@@ -171,4 +194,10 @@ import {ImageFit} from "./Image/OfficeImage.types";
     .card:hover {
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
     }
+
+    .vertical-slider {
+        height: 150px;
+        display: inline-block;
+        width: 50px;
+    }
 </style>
diff --git a/src/components/Slider/OfficeSlider.styles.ts b/src/components/Slider/OfficeSlider.styles.ts
new file mode 100644
index 0000000..bedf719
--- /dev/null
+++ b/src/components/Slider/OfficeSlider.styles.ts
@@ -0,0 +1,260 @@
+import {IOfficeSliderStyleProps, IOfficeSliderStyles} from "@/components/Slider/OfficeSlider.types";
+import {AnimationVariables, getFocusStyle, HighContrastSelector} from "@/styling";
+import {getGlobalClassNames} from "@/styling/styles/getGlobalClassNames";
+import {getRTL} from "@uifabric/merge-styles/lib/transforms/rtlifyRules";
+
+const GlobalClassNames = {
+  root: "ms-Slider",
+  enabled: "ms-Slider-enabled",
+  disabled: "ms-Slider-disabled",
+  row: "ms-Slider-row",
+  column: "ms-Slider-column",
+  container: "ms-Slider-container",
+  slideBox: "ms-Slider-slideBox",
+  line: "ms-Slider-line",
+  thumb: "ms-Slider-thumb",
+  activeSection: "ms-Slider-active",
+  inactiveSection: "ms-Slider-inactive",
+  valueLabel: "ms-Slider-value",
+  showValue: "ms-Slider-showValue",
+  showTransitions: "ms-Slider-showTransitions"
+};
+
+export const getStyles = (props: IOfficeSliderStyleProps): IOfficeSliderStyles => {
+  const { className, titleLabelClassName, theme } = props;
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
+  const slideBoxActiveSectionStyles = !props.disabled && {
+    backgroundColor: theme.palette.themePrimary,
+    selectors: {
+      [HighContrastSelector]: {
+        backgroundColor: "Highlight"
+      }
+    }
+  };
+
+  const slideBoxInactiveSectionStyles = !props.disabled && {
+    backgroundColor: theme.palette.themeLight,
+    selectors: {
+      [HighContrastSelector]: {
+        borderColor: "Highlight"
+      }
+    }
+  };
+
+  const slideBoxActiveThumbStyles = !props.disabled && {
+    border: `2px solid ${theme.palette.themePrimary}`,
+    selectors: {
+      [HighContrastSelector]: {
+        borderColor: "Highlight"
+      }
+    }
+  };
+
+  return {
+    root: [
+      classNames.root,
+      theme.fonts.medium,
+      {
+        userSelect: "none"
+      },
+      props.vertical && {
+        marginRight: 8
+      },
+      ...[!props.disabled ? classNames.enabled : undefined],
+      ...[props.disabled ? classNames.disabled : undefined],
+      ...[!props.vertical ? classNames.row : undefined],
+      ...[props.vertical ? classNames.column : undefined],
+      className
+    ],
+    titleLabel: [
+      {
+        padding: 0
+      },
+      titleLabelClassName
+    ],
+    container: [
+      classNames.container,
+      {
+        display: "flex",
+        flexWrap: "nowrap",
+        alignItems: "center"
+      },
+      props.vertical && {
+        flexDirection: "column",
+        height: "100%",
+        textAlign: "center",
+        margin: "8px 0"
+      }
+    ],
+    slideBox: [
+      classNames.slideBox,
+      getFocusStyle(theme),
+      {
+        background: "transparent",
+        border: "none",
+        flexGrow: 1,
+        lineHeight: 28,
+        display: "flex",
+        alignItems: "center",
+        selectors: {
+          ":active $activeSection": slideBoxActiveSectionStyles,
+          ":hover $activeSection": slideBoxActiveSectionStyles,
+          ":active $inactiveSection": slideBoxInactiveSectionStyles,
+          ":hover $inactiveSection": slideBoxInactiveSectionStyles,
+          ":active $thumb": slideBoxActiveThumbStyles,
+          ":hover $thumb": slideBoxActiveThumbStyles,
+          "$thumb": [
+            {
+              borderWidth: 2,
+              borderStyle: "solid",
+              borderColor: theme.palette.neutralSecondary,
+              borderRadius: 10,
+              boxSizing: "border-box",
+              background: theme.palette.white,
+              display: "block",
+              width: 16,
+              height: 16,
+              position: "absolute"
+            },
+            props.vertical
+              ? {
+                  left: -6,
+                  margin: "0 auto",
+                  transform: "translateY(8px)"
+                }
+              : {
+                  top: -6,
+                  transform: getRTL() ? "translateX(50%)" : "translateX(-50%)"
+                },
+            props.showTransitions && {
+              transition: `left ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
+            },
+            props.disabled && {
+              borderColor: theme.palette.neutralTertiaryAlt,
+              selectors: {
+                [HighContrastSelector]: {
+                  borderColor: "GrayText"
+                }
+              }
+            }
+          ]
+        }
+      },
+      props.vertical
+        ? {
+            height: "100%",
+            width: 28,
+            padding: "8px 0" // Make room for thumb at bottom of line
+          }
+        : {
+            height: 28,
+            width: "auto",
+            padding: "0 8px" // Make room for thumb at ends of line
+          },
+      ...[props.showValue ? classNames.showValue : undefined],
+      ...[props.showTransitions ? classNames.showTransitions : undefined]
+    ],
+    thumb: [classNames.thumb],
+    line: [
+      classNames.line,
+      {
+        display: "flex",
+        position: "relative",
+        selectors: {
+          $lineContainer: [
+            {
+              borderRadius: 4,
+              boxSizing: "border-box"
+            },
+            props.vertical
+              ? {
+                  width: 4,
+                  height: "100%"
+                }
+              : {
+                  height: 4,
+                  width: "100%"
+                }
+          ]
+        }
+      },
+      props.vertical
+        ? {
+            height: "100%",
+            width: 4,
+            margin: "0 auto",
+            flexDirection: "column-reverse"
+          }
+        : {
+            width: "100%"
+          }
+    ],
+    lineContainer: [{}],
+    activeSection: [
+      classNames.activeSection,
+      {
+        background: theme.palette.neutralSecondary,
+        selectors: {
+          [HighContrastSelector]: {
+            backgroundColor: "WindowText"
+          }
+        }
+      },
+      props.showTransitions && {
+        transition: `width ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
+      },
+      props.disabled && {
+        background: theme.palette.neutralTertiaryAlt,
+        selectors: {
+          [HighContrastSelector]: {
+            backgroundColor: "GrayText",
+            borderColor: "GrayText"
+          }
+        }
+      }
+    ],
+    inactiveSection: [
+      classNames.inactiveSection,
+      {
+        background: theme.palette.neutralTertiaryAlt,
+        selectors: {
+          [HighContrastSelector]: {
+            border: "1px solid WindowText"
+          }
+        }
+      },
+      props.showTransitions && {
+        transition: `width ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
+      },
+      props.disabled && {
+        background: theme.palette.neutralLight,
+        selectors: {
+          [HighContrastSelector]: {
+            backgroundColor: "GrayText",
+            borderColor: "GrayText"
+          }
+        }
+      }
+    ],
+    valueLabel: [
+      classNames.valueLabel,
+      {
+        flexShrink: 1,
+        width: 30,
+        lineHeight: "1" // using a string here meaning it's relative to the size of the font
+      },
+      props.vertical
+        ? {
+            margin: "0 auto",
+            whiteSpace: "nowrap",
+            width: 40
+          }
+        : {
+            margin: "0 8px",
+            whiteSpace: "nowrap",
+            width: 40
+          }
+    ]
+  };
+};
diff --git a/src/components/Slider/OfficeSlider.types.ts b/src/components/Slider/OfficeSlider.types.ts
new file mode 100644
index 0000000..634b783
--- /dev/null
+++ b/src/components/Slider/OfficeSlider.types.ts
@@ -0,0 +1,78 @@
+import {ITheme} from "@/styling";
+import {IStyle} from "@uifabric/merge-styles";
+
+export interface IOfficeSliderProps {
+    /**
+     * Description label of the Slider
+     */
+    label?: string;
+
+    /**
+     * The initial value of the Slider. Use this if you intend for the Slider to be an uncontrolled component.
+     * This value is mutually exclusive to value. Use one or the other.
+     */
+    defaultValue?: number;
+
+    /**
+     * The initial value of the Slider. Use this if you intend to pass in a new value as a result of onChange events.
+     * This value is mutually exclusive to defaultValue. Use one or the other.
+     */
+    value?: number;
+
+    /**
+     * The min value of the Slider
+     * @defaultvalue 0
+     */
+    min?: number;
+
+    /**
+     * The max value of the Slider
+     * @defaultvalue 10
+     */
+    max?: number;
+
+    /**
+     * The difference between the two adjacent values of the Slider
+     * @defaultvalue 1
+     */
+    step?: number;
+
+    /**
+     * Whether to show the value on the right of the Slider.
+     * @defaultvalue true
+     */
+    showValue?: boolean;
+
+    /**
+     * Optional flag to render the slider vertically. Defaults to rendering horizontal.
+     */
+    vertical?: boolean;
+
+    /**
+     * Optional flag to render the Slider as disabled.
+     */
+    disabled?: boolean;
+}
+
+export interface IOfficeSliderStyleProps {
+    theme: ITheme;
+    showTransitions?: boolean;
+    showValue?: boolean;
+    titleLabelClassName?: string;
+    className?: string;
+    disabled: boolean;
+    vertical: boolean;
+}
+
+export interface IOfficeSliderStyles {
+    root: IStyle;
+    titleLabel: IStyle;
+    container: IStyle;
+    slideBox: IStyle;
+    line: IStyle;
+    thumb: IStyle;
+    lineContainer: IStyle;
+    activeSection: IStyle;
+    inactiveSection: IStyle;
+    valueLabel: IStyle;
+}
diff --git a/src/components/Slider/OfficeSlider.vue b/src/components/Slider/OfficeSlider.vue
new file mode 100644
index 0000000..6a12ee1
--- /dev/null
+++ b/src/components/Slider/OfficeSlider.vue
@@ -0,0 +1,239 @@
+<template>
+    <div :class="classNames.root">
+        <OfficeLabel v-if="label" :class="classNames.titleLabel" :for="id">{{label}}</OfficeLabel>
+        <div :class="classNames.container">
+            <div role="slider"
+                 :tabindex="disabled ? undefined : 0"
+                 :class="classNames.slideBox"
+                 :id="id"
+                 @mousedown="onMouseDownOrTouchStart"
+                 @touchstart="onMouseDownOrTouchStart"
+                 @keydown="onKeyDown">
+                <div :class="classNames.line" ref="sliderLine">
+                    <span :class="classNames.thumb" :style="thumbStyle"></span>
+                    <span
+                            :class="classNames.lineContainer + ' ' + classNames.activeSection"
+                            :style="{ [lengthString]: thumbOffsetPercent + '%' }"></span>
+                    <span
+                            :class="classNames.lineContainer + ' ' + classNames.inactiveSection"
+                            :style="{ [lengthString]: 100 - thumbOffsetPercent + '%' }"></span>
+                </div>
+            </div>
+            <OfficeLabel v-if="showValue" :class="classNames.valueLabel">{{value}}</OfficeLabel>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import OfficeLabel from "@/components/Label/OfficeLabel.vue";
+    import {getStyles} from "@/components/Slider/OfficeSlider.styles";
+    import {loadTheme} from "@/styling";
+    import {getId} from "@/utility/object";
+    import {mergeStyleSets} from "@uifabric/merge-styles";
+    import {getRTL} from "@uifabric/merge-styles/lib/transforms/rtlifyRules";
+    import {Component, Model, Prop, Vue, Watch} from "vue-property-decorator";
+
+    @Component({
+        components: {OfficeLabel}
+    })
+    export default class OfficeSlider extends Vue {
+        @Prop({type: Boolean, default: false}) public disabled!: boolean;
+        @Prop({type: Boolean, default: false}) public vertical!: boolean;
+        @Prop({type: Boolean, default: false}) public showValue!: boolean;
+        @Prop({type: Number, default: 100}) public max!: number;
+        @Prop({type: Number, default: 0}) public min!: number;
+        @Prop({type: Number, default: 1}) public step!: number;
+        @Prop({type: String, default: null}) public label?: string;
+
+        @Model("change", {type: Number, default: 0}) private value!: number;
+
+        // Fields
+        private id = getId("Slider");
+        private renderedValue: number = 0;
+        private internalValue: number = 0;
+
+        // Computed Properties
+        private get lengthString() {
+            return this.vertical ? "height" : "width";
+        }
+
+        private get thumbOffsetPercent(): number {
+            return this.min === this.max ? 0 : ((this.renderedValue - this.min) / (this.max - this.min)) * 100;
+        }
+
+        private get thumbStyle() {
+            const direction: string = this.vertical ? "bottom" : getRTL() ? "right" : "left";
+            return {
+                [direction]: this.thumbOffsetPercent + "%"
+            };
+        }
+
+        private get classNames() {
+            return mergeStyleSets(getStyles({
+                theme: loadTheme({}),
+                vertical: this.vertical,
+                disabled: this.disabled,
+                showValue: this.showValue,
+                showTransitions: this.renderedValue === this.internalValue
+            }));
+        }
+
+        // Watch
+        @Watch("value")
+        private watchValue(oldVal: number, newVal: number) {
+            if (oldVal !== newVal) {
+                this.internalValue = newVal;
+                this.renderedValue = newVal;
+            }
+        }
+
+        // Lifecycle Hooks
+        private created() {
+            this.$watch(() => [this.min, this.max, this.value], () => {
+                const realValue = Math.max(this.min, Math.min(this.max, this.value));
+                if (realValue !== this.internalValue) {
+                    this.internalValue = realValue;
+                    this.renderedValue = realValue;
+                }
+            }, {immediate: true});
+
+            const realValue = Math.max(this.min, Math.min(this.max, this.value));
+            if (realValue !== this.value)
+                this.$emit("change", realValue);
+        }
+
+        private beforeDestroy() {
+            window.removeEventListener("mousemove", this.onMouseMoveOrTouchMove);
+            window.removeEventListener("mouseup", this.onMouseUpOrTouchEnd);
+            window.removeEventListener("touchmove", this.onMouseMoveOrTouchMove);
+            window.removeEventListener("touchend", this.onMouseUpOrTouchEnd);
+        }
+
+        // Functions
+        private onMouseDownOrTouchStart(event: MouseEvent | TouchEvent): void {
+            if (this.disabled)
+                return;
+
+            if (event.type === "mousedown") {
+                window.addEventListener("mousemove", this.onMouseMoveOrTouchMove);
+                window.addEventListener("mouseup", this.onMouseUpOrTouchEnd);
+            } else if (event.type === "touchstart") {
+                window.addEventListener("touchmove", this.onMouseMoveOrTouchMove);
+                window.addEventListener("touchend", this.onMouseUpOrTouchEnd);
+            }
+
+            this.onMouseMoveOrTouchMove(event, true);
+        }
+
+        private onMouseMoveOrTouchMove(event: MouseEvent | TouchEvent, suppressEventCancelation?: boolean): void {
+            if (!this.$refs.sliderLine)
+                return;
+
+            const {max, min, step} = this;
+            const steps: number = (max! - min!) / step!;
+            const sliderPositionRect: ClientRect = (this.$refs.sliderLine as HTMLDivElement).getBoundingClientRect();
+            const sliderLength: number = !this.vertical ? sliderPositionRect.width : sliderPositionRect.height;
+            const stepLength: number = sliderLength / steps;
+            let currentSteps: number | undefined;
+            let distance: number | undefined;
+
+            if (!this.vertical) {
+                const left: number | undefined = this.getPosition(event, this.vertical);
+                distance = getRTL() ? sliderPositionRect.right - left! : left! - sliderPositionRect.left;
+                currentSteps = distance / stepLength;
+            } else {
+                const bottom: number | undefined = this.getPosition(event, this.vertical);
+                distance = sliderPositionRect.bottom - bottom!;
+                currentSteps = distance / stepLength;
+            }
+
+            let currentValue: number | undefined;
+            let renderedValue: number | undefined;
+
+            // The value shouldn't be bigger than max or be smaller than min.
+            if (currentSteps! > Math.floor(steps)) {
+                renderedValue = currentValue = max as number;
+            } else if (currentSteps! < 0) {
+                renderedValue = currentValue = min as number;
+            } else {
+                renderedValue = min! + step! * currentSteps!;
+                currentValue = min! + step! * Math.round(currentSteps!);
+            }
+
+            this.updateValue(currentValue, renderedValue);
+
+            if (!suppressEventCancelation) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+
+        private getPosition(event: MouseEvent | TouchEvent, vertical: boolean | undefined): number | undefined {
+            let currentPosition: number | undefined;
+            switch (event.type) {
+                case "mousedown":
+                case "mousemove":
+                    currentPosition = !vertical ? (event as MouseEvent).clientX : (event as MouseEvent).clientY;
+                    break;
+                case "touchstart":
+                case "touchmove":
+                    currentPosition = !vertical ? (event as TouchEvent).touches[0].clientX : (event as TouchEvent).touches[0].clientY;
+                    break;
+            }
+            return currentPosition;
+        }
+
+        private onKeyDown(event: KeyboardEvent): void {
+            let value: number | undefined = this.internalValue;
+            let diff: number | undefined = 0;
+
+            switch (event.which) {
+                case 40: // DOWN
+                    diff = -(this.step as number);
+                    break;
+                case 38: // UP
+                    diff = this.step;
+                    break;
+                case 36: // HOME
+                    value = this.min;
+                    break;
+                case 35: // END
+                    value = this.max;
+                    break;
+                default:
+                    return;
+            }
+
+            const newValue: number = Math.min(this.max, Math.max(this.min, value! + diff!));
+            this.updateValue(newValue, newValue);
+
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        private updateValue(value: number, renderedValue: number): void {
+            let numDec = 0;
+            if (isFinite(this.step)) {
+                while (Math.round(this.step * Math.pow(10, numDec)) / Math.pow(10, numDec) !== this.step) {
+                    numDec++;
+                }
+            }
+
+            // Make sure value has correct number of decimal places based on number of decimals in step
+            const roundedValue = parseFloat(value.toFixed(numDec));
+
+            this.renderedValue = renderedValue;
+            this.internalValue = roundedValue;
+            this.$emit("change", this.internalValue);
+        }
+
+        private onMouseUpOrTouchEnd(): void {
+            this.renderedValue = this.internalValue;
+
+            window.removeEventListener("mousemove", this.onMouseMoveOrTouchMove);
+            window.removeEventListener("mouseup", this.onMouseUpOrTouchEnd);
+            window.removeEventListener("touchmove", this.onMouseMoveOrTouchMove);
+            window.removeEventListener("touchend", this.onMouseUpOrTouchEnd);
+        }
+    }
+</script>
diff --git a/src/utility/css.ts b/src/utility/css.ts
new file mode 100644
index 0000000..b8019ed
--- /dev/null
+++ b/src/utility/css.ts
@@ -0,0 +1,53 @@
+/**
+ * Dictionary of booleans.
+ *
+ * @internal
+ */
+export interface IDictionary {
+  [className: string]: boolean;
+}
+
+/**
+ * Serializable object.
+ *
+ * @internal
+ */
+export interface ISerializableObject {
+  toString?: () => string;
+}
+
+/**
+ * css input type.
+ *
+ * @internal
+ */
+export type ICssInput = string | ISerializableObject | IDictionary | null | undefined | boolean;
+
+/**
+ * Concatination helper, which can merge class names together. Skips over falsey values.
+ *
+ * @public
+ */
+export function css(...args: ICssInput[]): string {
+  let classes = [];
+
+  for (let arg of args) {
+    if (arg) {
+      if (typeof arg === 'string') {
+        classes.push(arg);
+      } else if (arg.hasOwnProperty('toString') && typeof arg.toString === 'function') {
+        classes.push(arg.toString());
+      } else {
+        // tslint:disable-next-line:no-any
+        for (let key in arg as any) {
+          // tslint:disable-next-line:no-any
+          if ((arg as any)[key]) {
+            classes.push(key);
+          }
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}