Merge pull request #53 from rohankapoorcom/right-left-support

Add support for right-to-left sliders

README.md

@@ -93,7 +93,7 @@ Slider Button Card supports Lovelace's Visual Editor.
 
 | Name              | Type    | Requirement  | Description                                 | Default             |
 | ----------------- | ------- | ------------ | ------------------------------------------- | ------------------- |
-| direction              | string  | **Optional** | Direction `left-right, top-bottom, bottom-top`                                   | `left-right`       |
+| direction              | string  | **Optional** | Direction `left-right, right-left, top-bottom, bottom-top`                                   | `left-right`       |
 | background        | string | **Optional** | Background `solid, gradient, triangle, striped, custom`  | `gradient`             |
 | use_state_color        | boolean | **Optional** | Use state color  | `true`             |
 | use_percentage_bg_opacity        | boolean | **Optional** | Apply opacity to background based on percentage  | `true`             |

src/controllers/controller.ts

@@ -256,6 +256,16 @@ export abstract class Controller {
           percentage = 100 - percentage;
         }
         break
+      case SliderDirections.RIGHT_LEFT:
+        percentage = toPercentage(
+          event.clientX,
+          left,
+          width
+        );
+        if (!this.invert) {
+          percentage = 100 - percentage;
+        }
+        break
       case SliderDirections.TOP_BOTTOM:
         percentage = toPercentage(
           event.clientY,

src/localize/languages/en.json

@@ -45,6 +45,7 @@
   },
   "direction": {
     "left-right": "Left to right",
+    "right-left": "Right to left",
     "top-bottom": "Top to bottom",
     "bottom-top": "Bottom to top"
   },

src/slider-button-card.ts

@@ -684,6 +684,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       --slider-bg: linear-gradient(var(--slider-bg-direction), transparent 0%, transparent 50%, var(--slider-color) 50%, var(--slider-color) 100%);
       border-right: 0px solid;
     }    
+    .slider[data-background="triangle"][data-mode="right-left"] .slider-bg {
+      --slider-bg-direction: to bottom left;
+    }
     .slider[data-background="triangle"][data-mode="bottom-top"] .slider-bg {
       --slider-bg-direction: to top left;      
     }    
@@ -705,6 +708,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     .slider[data-background="striped"][data-mode="top-bottom"] .slider-bg {      
       --slider-bg-size: 100% 4px;
     }    
+    .slider[data-mode="right-left"] .slider-bg {
+      --slider-bg-direction: to left;      
+    }    
     .slider[data-mode="bottom-top"] .slider-bg {
       --slider-bg-direction: to top;      
     }    
@@ -725,6 +731,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     .changing .slider .slider-thumb {
       transition: none;
     }    
+    .slider[data-mode="right-left"] .slider-thumb {
+      transform: translateX(calc(var(--slider-value) * -1))  !important;
+    }
     .slider[data-mode="top-bottom"] .slider-thumb {
       transform: translateY(var(--slider-value)) !important;
     }

src/types.ts

@@ -59,6 +59,7 @@ export enum ActionButtonMode {
 
 export enum SliderDirections {
   LEFT_RIGHT = 'left-right',
+  RIGHT_LEFT = 'right-left',
   TOP_BOTTOM = 'top-bottom',
   BOTTOM_TOP = 'bottom-top',
 }