Merge branch 'dev'

README.md

@@ -590,7 +590,7 @@ Similary to `button_style`, `slider_style` can be used to change the CSS of the
 | ------------------- | ------------------------------------------------------------------------- |
 | --color             | Color of the slider thumb / percentage on.                                |
 | --background        | Slider background color.                                                  |
-| height              | Slider thumb / percentage on height.                                      |
+| --height            | Slider thumb / percentage on height.                                      |
 | --background-height | Slider background height. Maximum is contrained by the foreground height. |
 | --border-radius     | Border radius of the entire slider.                                       |
 
@@ -1419,7 +1419,7 @@ touchpad_style:
     linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)
 slider_style:
   '--border-radius': 4px
-  height: 24px
+  '--height': 24px
   '--background-height': 12px
   '--color': darkred
   '--background': red

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "android-tv-card",
-	"version": "3.2.5",
+	"version": "3.2.6",
 	"description": "Android TV Remote Card",
 	"main": "./dist/android-tv-card.js",
 	"scripts": {

src/classes/remote-slider.ts

@@ -108,7 +108,8 @@ export class RemoteSlider extends BaseRemoteElement {
 		if (this.lastX == undefined) {
 			this.lastX = currentX;
 		} else if (
-			Math.abs(currentX - this.lastX) < Math.abs(currentY - this.lastY)
+			Math.abs(currentX - this.lastX) <
+			Math.abs(currentY - this.lastY) - 20
 		) {
 			this.scrolling = true;
 		}
@@ -212,10 +213,11 @@ export class RemoteSlider extends BaseRemoteElement {
 			.container {
 				all: inherit;
 				overflow: hidden;
-				height: 50px;
+				height: var(--height);
 				border-radius: var(--border-radius);
 
 				--color: var(--primary-text-color);
+				--height: 50px;
 				--background: var(--secondary-background-color);
 				--background-height: 50px;
 				--border-radius: 25px;
@@ -235,7 +237,7 @@ export class RemoteSlider extends BaseRemoteElement {
 				appearance: none;
 				-webkit-appearance: none;
 				-moz-appearance: none;
-				height: inherit;
+				height: var(--height);
 				width: inherit;
 				border-radius: var(--border-radius);
 				background: none;
@@ -245,14 +247,26 @@ export class RemoteSlider extends BaseRemoteElement {
 			.slider::-webkit-slider-thumb {
 				appearance: none;
 				-webkit-appearance: none;
-				height: var(--background-height);
+				height: var(--height);
 				width: 24px;
 				cursor: pointer;
 				z-index: 1;
 				background: var(--color);
 				box-shadow: -100vw 0 0 100vw var(--color);
 			}
 
+			.slider::-moz-range-thumb {
+				appearance: none;
+				-webkit-appearance: none;
+				height: var(--height);
+				width: 24px;
+				border-color: var(--color);
+				background: var(--color);
+				cursor: pointer;
+				z-index: 1;
+				box-shadow: -100vw 0 0 100vw var(--color);
+			}
+
 			.slider-off::-webkit-slider-thumb {
 				visibility: hidden;
 			}