Revert "Rename classes and element"

This reverts commit b7bb9cb339.

ui/src/dashboards/components/Ranger.js

@@ -23,8 +23,8 @@ const Ranger = ({onSetRange, axes}) => {
           <label htmlFor="min">Lower Bound</label>
           <div className="one-or-any">
             <div className="one-or-any--auto">auto</div>
-            <div className="one-or-any--toggle">
-              <div className="one-or-any--groove-knob" />
+            <div className="one-or-any--switch">
+              <div />
             </div>
             <input
               className="form-control input-sm"

ui/src/style/components/one-or-any.scss

@@ -24,7 +24,7 @@
     background-color 0.25s ease,
     color 0.25s ease;
 }
-.one-or-any--toggle {
+.one-or-any--switch {
   display: flex;
   align-items: center;
   border: 2px solid $g5-pepper;
@@ -32,6 +32,33 @@
   border-right: 0;
   position: relative;
 
+  // Tray
+  > div {
+    margin: 0 10px;
+    z-index: 3;
+    width: 28px;
+    height: 8px;
+    border-radius: 4px;
+    background-color: $g6-smoke;
+    position: relative;
+
+    // Dot
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background-color: $c-pool;
+      transition:
+        background-color 0.25s ease,
+        transform 0.25s ease;
+      transform: translate(-100%,-50%);
+    }
+  }
+
   // Background Gradients
   &:before, &:after {
     content: '';
@@ -55,32 +82,7 @@
 
   &:hover {
     cursor: pointer;
-    .one-or-any--groove-knob:after {background-color: $c-laser;}
-  }
-}
-.one-or-any--groove-knob {
-  margin: 0 10px;
-  z-index: 3;
-  width: 28px;
-  height: 8px;
-  border-radius: 4px;
-  background-color: $g6-smoke;
-  position: relative;
-
-  // Knob
-  &:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background-color: $c-pool;
-    transition:
-      background-color 0.25s ease,
-      transform 0.25s ease;
-    transform: translate(-100%,-50%);
+    > div:after {background-color: $c-laser;}
   }
 }
 // Customize form input
@@ -90,9 +92,9 @@
 }
 // Toggled state
 .one-or-any.toggled {
-  .one-or-any--groove-knob:after {transform: translate(0%,-50%);}
+  .one-or-any--switch > div:after {transform: translate(0%,-50%);}
   // Fade out left, fade in right
-  .one-or-any--toggle:before {opacity: 0;}
+  .one-or-any--switch:before {opacity: 0;}
   // Make auto look disabled
   .one-or-any--auto {
     background-color: $g3-castle;