Change HTML classing for easier styling: implementing a singular class

slider89.css

@@ -3,33 +3,39 @@
 }
 .slider89 .slider {
   position: relative;
-  padding: 0;
-  background-color: hsl(0, 0%, 19%);
   font-family: monospace;
   font-size: 18px;
   font-weight: bold;
+  padding: 0;
+}
+.slider89_wrapper {
+  background-color: hsl(0, 0%, 19%);
   height: 25px;
 }
 .slider89 .slider_knob {
   position: absolute;
   cursor: pointer;
   left: 0;
+  z-index: 1;
+}
+.slider89_knob {
   height: 25px;
   width: 14px;
   background-color: hsl(0, 0%, 27%);
-  z-index: 1;
 }
 .slider89 .slider_tooltip {
   position: absolute;
   display: flex;
   align-items: center;
-  padding: 1px 3px 0;
-  color: hsl(0, 0%, 45%);
   height: 100%;
   cursor: default;
   opacity: 1;
   transition: .2s ease-out;
 }
+.slider89_tooltip {
+  color: hsl(0, 0%, 45%);
+  padding: 1px 3px 0;
+}
 .slider89 .slider_tooltip.left {
   left: 0;
 }
@@ -39,12 +45,10 @@
 .slider89 .slider_tooltip.hidden {
   opacity: 0;
 }
-
-.slider89 .slider_header {
+.slider89_header {
   color: hsl(0, 0%, 70%);
   font-family: 'Calibri', serif;
   font-size: 20px;
-  display: block;
 }
 
 .noselect {