From ef0eba7c335e57da9eb72fca6016f1efbf3c36c3 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 13 May 2024 22:48:23 +0200
Subject: [PATCH] fix(frontend): fix slider component styling (#3720)

---
 .../apps/components/inputs/AppRangeInput.svelte           | 4 ----
 .../apps/components/inputs/AppSliderInputs.svelte         | 8 ++++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
index fbea05a6d4..9177b9ae8b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
@@ -154,10 +154,6 @@
 		transform: translate(-50%, -50%);
 	}
 
-	:global(#range-slider.rangeSlider .rangeNub) {
-		background-color: #7e9abd;
-	}
-
 	:global(.dark #range-slider.rangeSlider > .rangePips > .pip) {
 		color: #eeeeee;
 	}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
index fb2948af35..7d4adaa877 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
@@ -141,7 +141,7 @@
 			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		>
 			<RangeSlider
-				id="range-slider"
+				id="slider-input"
 				springValues={{ stiffness: 1, damping: 1 }}
 				vertical={resolvedConfig.vertical}
 				bind:slider
@@ -161,17 +161,17 @@
 </AlignWrapper>
 
 <style>
-	:global(#range-slider.rangeSlider) {
+	:global(#slider-input.rangeSlider) {
 		font-size: 12px;
 		text-transform: uppercase;
 	}
 
-	:global(#range-slider.rangeSlider .rangeHandle) {
+	:global(#slider-input.rangeSlider .rangeHandle) {
 		width: 2em;
 		height: 2em;
 	}
 
-	:global(#range-slider.rangeSlider .rangeFloat) {
+	:global(#slider-input.rangeSlider .rangeFloat) {
 		opacity: 1;
 		background: transparent;
 		top: 50%;