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%;