reverse slider thumb offset if css direction is rtl

Nerwyn · Sep 13, 2024 · 4abf43e · 4abf43e
1 parent 67ef0f8
commit 4abf43e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/dist/universal-remote-card.min.js b/dist/universal-remote-card.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "universal-remote-card",
-	"version": "4.0.4",
+	"version": "4.0.5",
 	"description": "Universal Remote Card",
 	"main": "./dist/universal-remote-card.min.js",
 	"scripts": {

diff --git a/src/classes/remote-slider.ts b/src/classes/remote-slider.ts
@@ -44,6 +44,7 @@ export class RemoteSlider extends BaseRemoteElement {
 			this.setThumbOffset();
 		}
 	});
+	rtl: boolean = false;
 
 	onInput(e: InputEvent) {
 		const slider = e.currentTarget as HTMLInputElement;
@@ -250,7 +251,7 @@ export class RemoteSlider extends BaseRemoteElement {
 	buildBackground() {
 		const style: StyleInfo = {};
 		if (this.vertical) {
-			style['transform'] = 'rotateZ(270deg)';
+			style['transform'] = `rotateZ(${this.rtl ? '90deg' : '270deg'})`;
 			style['width'] = `${this.sliderWidth}px`;
 			style[
 				'height'
@@ -320,7 +321,7 @@ export class RemoteSlider extends BaseRemoteElement {
 			style['pointer-events'] = 'none';
 		}
 		if (this.vertical) {
-			style['transform'] = 'rotateZ(270deg)';
+			style['transform'] = `rotateZ(${this.rtl ? '90deg' : '270deg'})`;
 			style['height'] = `${this.sliderHeight}px`;
 			style['width'] = `${this.sliderWidth}px`;
 			style['touch-action'] = 'none';
@@ -411,8 +412,12 @@ export class RemoteSlider extends BaseRemoteElement {
 				containerStyle['width'] = 'var(--height)';
 			}
 		}
+		this.rtl = getComputedStyle(this).direction == 'rtl';
 		this.setThumbOffset();
-		this.style.setProperty('--thumb-offset', `${this.thumbOffset}px`);
+		this.style.setProperty(
+			'--thumb-offset',
+			`${this.rtl ? '-1 * ' : ''}${this.thumbOffset})px`,
+		);
 
 		return html`
 			<div class="container" style=${styleMap(containerStyle)}>