Changed class name for slider container and added colorMode key to re…

…adme for slider-v2.

docs/cards/slider-v2.md

@@ -27,6 +27,7 @@ It is completely customizable now and fully templatable.
 | ---- | ---- | ------- | ----------- |
 | type | string | **Required** | `custom:my-slider-v2` |
 | entity | string | **Required** | `light.livingroom` |
+| colorMode | string | brightness | Can be brightness, temperature, hue, saturation |
 | vertical | boolean | false | This will set the slider to be vertical and handled from bottom to top. Default on covers |
 | flipped | boolean | false | This will just flip the slider to go from right to left or top to bottom. Default on covers |
 | inverse | boolean | false | Will inverse how far the slider has progressed compared to value. so if brightness is 75%, then it will only be 25% progressed. This is useful for cover, where it is Default. |

src/cards/my-slider.ts

@@ -175,7 +175,7 @@ export class MySliderV2 extends LitElement {
         }
 
         const setElements = (event) => {
-            const sliderMaybe = event.composedPath().find(el => el.classList.contains('my-slider-custom'))
+            const sliderMaybe = event.composedPath().find(el => el.classList.contains('my-slider-custom-container'))
             if (!sliderMaybe) {
                 this.sliderEl = event.target
             }
@@ -262,8 +262,8 @@ export class MySliderV2 extends LitElement {
 
         this.createAndCleanupEventListeners(sliderHandler)
         return html`
-            <ha-card style="${styleMap(cardStl)}">
-                <div class="my-slider-custom" id="${this.sliderId}" style="${styleMap(containerStl)}" data-value="${this.sliderVal}" data-progress-percent="${this.sliderValPercent}"
+            <ha-card class="my-slider-custom-card" style="${styleMap(cardStl)}">
+                <div class="my-slider-custom-container" id="${this.sliderId}" style="${styleMap(containerStl)}" data-value="${this.sliderVal}" data-progress-percent="${this.sliderValPercent}"
                     @mousedown="${sliderHandler}"
                     @mouseup="${sliderHandler}"
                     @mousemove="${sliderHandler}"