Vuefy and I'm not going to cleanup SliderComponent now thank you

.eslintignore

@@ -1 +1,2 @@
 public/**/*.js
+src/components/SliderComponent.vue

javascripts/components/celestials/subtabs/enslaved-tab.js

@@ -1,7 +1,7 @@
 import "../celestial-quote-history.js";
-import "../../common/ad-slider-component.js";
 import PrimaryButton from "@/components/PrimaryButton";
 import PrimaryToggleButton from "@/components/PrimaryToggleButton";
+import SliderComponent from "@/components/SliderComponent";
 
 Vue.component("modal-enslaved-hints", {
   data() {
@@ -140,7 +140,8 @@ Vue.component("modal-enslaved-hints", {
 Vue.component("enslaved-tab", {
   components: {
     PrimaryButton,
-    PrimaryToggleButton
+    PrimaryToggleButton,
+    SliderComponent
   },
   data: () => ({
     isStoringBlackHole: false,
@@ -388,7 +389,7 @@ Vue.component("enslaved-tab", {
           <div v-if="canAdjustStoredTime" class="l-enslaved-top-container__half">
             Black Hole charging rate: {{ storedTimeRate }}
             <br><br>
-            <ad-slider-component
+            <SliderComponent
               v-bind="sliderProps"
               :value="storedFraction"
               @input="adjustSlider($event)"

javascripts/components/common/plus-minus-button.js

@@ -1,33 +0,0 @@
-Vue.component("plus-minus-button", {
-  props: {
-    type: {
-      type: String,
-      default: "plus",
-    },
-    size: String,
-  },
-  data() {
-    return {
-      color: "white",
-      computedSize: 0,
-    };
-  },
-  mounted() {
-    this.color = getComputedStyle(this.$el).color;
-    this.computedSize = this.$el.offsetWidth;
-  },
-  computed: {
-    iconClass() {
-      return `fas fa-${this.type}`;
-    }
-  },
-  template: `
-    <div
-      class="c-ad-slider__button"
-      v-repeating-click="{ delay: 500 }"
-      @firstclick="$emit('click')"
-      @repeatclick="$emit('click')"
-    >
-      <div :class="iconClass" />
-    </div>`
-});

javascripts/components/reality/black-hole/black-hole-tab.js

@@ -1,10 +1,13 @@
 import "./black-hole-unlock-button.js";
 import "./black-hole-upgrade-row.js";
 import "./black-hole-state-row.js";
-import "../../common/ad-slider-component.js";
 import { BlackHoleAnimation } from "./black-hole-animation.js";
+import SliderComponent from "@/components/SliderComponent";
 
 Vue.component("black-hole-tab", {
+  components: {
+    SliderComponent
+  },
   data() {
     return {
       isUnlocked: false,
@@ -223,7 +226,7 @@ Vue.component("black-hole-tab", {
           </div>
           <div v-if="canAdjustStoredTime" class="l-enslaved-shop-container">
             Black Hole charging rate: {{ storedTimeRate }}
-            <ad-slider-component
+            <SliderComponent
               v-bind="sliderPropsStoring"
               :value="storedFraction"
               @input="adjustSliderStoring($event)"
@@ -232,7 +235,7 @@ Vue.component("black-hole-tab", {
           <div v-if="isNegativeBHUnlocked" class="l-enslaved-shop-container">
             Inverted Black Hole divides game speed by {{ format(negativeBHDivisor, 2, 2) }}.
             This requires both Black Holes to be permanent and only works when paused.
-            <ad-slider-component
+            <SliderComponent
               v-bind="sliderPropsNegative"
               :value="negativeSlider"
               @input="adjustSliderNegative($event)"

javascripts/components/reality/glyphs/glyph-levels-and-weights.js

@@ -1,12 +1,13 @@
-import "../../common/ad-slider-component.js";
 import ToggleButton from "@/components/ToggleButton";
+import SliderComponent from "@/components/SliderComponent";
 
 // The things inside player.celestials.effarig.glyphWeights
 const _GLYPH_WEIGHT_FIELDS = ["ep", "repl", "dt", "eternities"];
 
 Vue.component("glyph-levels-and-weights", {
   components: {
-    ToggleButton
+    ToggleButton,
+    SliderComponent
   },
   data() {
     return {
@@ -331,7 +332,7 @@ Vue.component("glyph-levels-and-weights", {
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('ep')">
-          <ad-slider-component
+          <SliderComponent
             v-bind="sliderProps"
             :value="weights.ep"
             :width="'100%'"
@@ -339,7 +340,7 @@ Vue.component("glyph-levels-and-weights", {
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('replicanti')">
-          <ad-slider-component
+          <SliderComponent
             v-bind="sliderProps"
             :value="weights.repl"
             :width="'100%'"
@@ -347,7 +348,7 @@ Vue.component("glyph-levels-and-weights", {
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('dt')">
-          <ad-slider-component
+          <SliderComponent
             v-bind="sliderProps"
             :value="weights.dt"
             :width="'100%'"
@@ -355,7 +356,7 @@ Vue.component("glyph-levels-and-weights", {
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('eternities')">
-          <ad-slider-component
+          <SliderComponent
             v-bind="sliderProps"
             :value="weights.eternities"
             :width="'100%'"

javascripts/components/reality/glyphs/sidebar/glyph-filter-panel.js

@@ -1,5 +1,5 @@
 import "../glyph-component.js";
-import "../../../common/ad-slider-component.js";
+import SliderComponent from "@/components/SliderComponent";
 
 const AutoSacAdvancedTab = {
   props: {
@@ -235,6 +235,7 @@ Vue.component("glyph-filter-panel", {
   components: {
     "auto-sac-effect-tab": AutoSacEffectTab,
     "auto-sac-advanced-tab": AutoSacAdvancedTab,
+    SliderComponent
   },
   data() {
     return {
@@ -448,7 +449,7 @@ Vue.component("glyph-filter-panel", {
           @click="bumpRarity(type.id)"
         >
           <glyph-component :glyph="{type: type.id, strength: strengthThreshold(type.id) }" v-bind="glyphIconProps" />
-          <ad-slider-component
+          <SliderComponent
             v-bind="raritySliderProps"
             :value="rarityThresholds[type.id]"
             :width="'100%'"
@@ -478,7 +479,7 @@ Vue.component("glyph-filter-panel", {
             :glyph="{type: advancedType, strength: strengthThreshold(advancedType) }"
             v-bind="glyphIconProps"
           />
-          <ad-slider-component
+          <SliderComponent
             v-bind="raritySliderProps"
             :value="rarityThresholds[advancedType]"
             :width="'100%'"

src/components/PlusMinusButton.vue

@@ -0,0 +1,41 @@
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      color: "white",
+      computedSize: 0,
+    };
+  },
+  computed: {
+    iconClass() {
+      return `fas fa-${this.type}`;
+    }
+  },
+  mounted() {
+    this.color = getComputedStyle(this.$el).color;
+    this.computedSize = this.$el.offsetWidth;
+  }
+};
+</script>
+
+<template>
+  <div
+    v-repeating-click="{ delay: 500 }"
+    class="c-ad-slider__button"
+    @firstclick="$emit('click')"
+    @repeatclick="$emit('click')"
+  >
+    <div :class="iconClass" />
+  </div>
+</template>
+

src/components/SliderComponent.vue

@@ -1,4 +1,5 @@
-import "./plus-minus-button.js";
+<script>
+import PlusMinusButton from "@/components/PlusMinusButton";
 
 /*
 * This is based on vue-slider-component
@@ -34,7 +35,11 @@ const roundToDPR = (function () {
   const r = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
   return value => Math.round(value * r) / r
 })()
-Vue.component("ad-slider-component", {
+
+export default {
+  components: {
+    PlusMinusButton
+  },
   props: {
     width: {
       type: String,
@@ -1012,11 +1017,14 @@ Vue.component("ad-slider-component", {
   beforeDestroy() {
     this.isComponentExists = false
     this.unbindEvents()
-  },
-  template: `
+  }
+};
+</script>
+
+<template>
   <div :class="['l-ad-slider', flowDirection, disabledClass, { 'l-ad-slider--has-label': piecewiseLabel }]"
        v-show="show">
-       <plus-minus-button v-if="plusMinusButtons" type="minus" size="1.6rem" @click="increment(-1)"/>
+    <PlusMinusButton v-if="plusMinusButtons" type="minus" size="1.6rem" @click="increment(-1)"/>
     <div ref="wrap"
          :class="['l-ad-slider__wrap', stateClass]"
          :style="[wrapStyles, boolDisabled ? disabledStyle : null]"
@@ -1180,6 +1188,6 @@ Vue.component("ad-slider-component", {
         </div>
       </div>
     </div>
-  <plus-minus-button v-if="plusMinusButtons" type="plus" size="1.6rem" @click="increment(1)"/>
-  </div>`
-});
+    <PlusMinusButton v-if="plusMinusButtons" type="plus" size="1.6rem" @click="increment(1)"/>
+  </div>
+</template>