diff --git a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
index ed08c2ce9c..f5e86ea486 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
@@ -101,7 +101,7 @@
 	<div class="flex flex-col w-full">
 		<div class="flex items-center w-full gap-1 px-1">
 			<span
-				class={twMerge(css?.limits?.class ?? '', 'wm-slider-limits')}
+				class={twMerge(css?.limits?.class ?? '', 'font-mono wm-slider-limits')}
 				style={css?.limits?.style ?? ''}
 			>
 				{+(resolvedConfig.min ?? 0)}
@@ -124,7 +124,7 @@
 				<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
 			</div>
 			<span
-				class={twMerge(css?.limits?.class ?? '', 'wm-slider-limits')}
+				class={twMerge(css?.limits?.class ?? '', 'font-mono wm-slider-limits')}
 				style={css?.limits?.style ?? ''}
 			>
 				{+(resolvedConfig.max ?? 1)}
@@ -133,7 +133,7 @@
 		<div class="flex justify-between px-1">
 			<span
 				class={twMerge(
-					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
+					'font-mono text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
 					css?.values?.class ?? '',
 					'wm-slider-value'
 				)}
@@ -143,7 +143,7 @@
 			</span>
 			<span
 				class={twMerge(
-					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
+					'font-mono text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
 					css?.values?.class ?? '',
 					'wm-slider-value'
 				)}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
index bc83d77826..99673b665f 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
@@ -133,11 +133,14 @@
 
 <AlignWrapper {render} hFull {verticalAlignment}>
 	<div class="flex {vertical ? 'flex-col' : ''} items-center w-full h-full gap-1 px-1">
-		<span class={twMerge(css?.limits?.class, 'wm-slider-limits')} style={css?.limits?.style ?? ''}>
+		<span
+			class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
+			style={css?.limits?.style ?? ''}
+		>
 			{vertical ? +(resolvedConfig?.max ?? 0) : +(resolvedConfig?.min ?? 0)}
 		</span>
 		<div
-			class={twMerge('grow', css?.bar?.class, 'wm-slider-bar')}
+			class={twMerge('grow', css?.bar?.class, 'font-mono wm-slider-bar')}
 			style={css?.bar?.style}
 			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		>
@@ -150,12 +153,15 @@
 				max={+(resolvedConfig?.max ?? 0)}
 			/>
 		</div>
-		<span class={twMerge(css?.limits?.class, 'wm-slider-limits')} style={css?.limits?.style ?? ''}>
+		<span
+			class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
+			style={css?.limits?.style ?? ''}
+		>
 			{vertical ? +(resolvedConfig?.min ?? 0) : +(resolvedConfig?.max ?? 1)}
 		</span>
 		<span class="mx-2">
 			<span
-				class={twMerge(spanClass, css?.value?.class ?? '', 'wm-slider-value')}
+				class={twMerge(spanClass, css?.value?.class ?? '', 'font-mono wm-slider-value')}
 				style={`${css?.value?.style ?? ''} ${width ? `width: ${width}px;` : ''}`}
 			>
 				{values[0]}