diff --git a/frontend/src/components/shared/sliderWithInput/SliderWithInput.tsx b/frontend/src/components/shared/sliderWithInput/SliderWithInput.tsx
new file mode 100644
index 000000000..e8e504ded
--- /dev/null
+++ b/frontend/src/components/shared/sliderWithInput/SliderWithInput.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Slider, Text, Group, NumberInput } from '@mantine/core';
+
+interface Props {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export default function SliderWithInput({
+  label,
+  value,
+  onChange,
+  disabled,
+  min = 0,
+  max = 200,
+  step = 1,
+}: Props) {
+  return (
+    <div>
+      <Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
+      <Group gap="sm" align="center">
+        <div style={{ flex: 1 }}>
+          <Slider min={min} max={max} step={step} value={value} onChange={onChange} disabled={disabled} />
+        </div>
+        <NumberInput
+          value={value}
+          onChange={(v) => onChange(Number(v) || 0)}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          style={{ width: 90 }}
+        />
+      </Group>
+    </div>
+  );
+}
+
+
diff --git a/frontend/src/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx b/frontend/src/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx
index 8a376c8de..6993186bb 100644
--- a/frontend/src/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx
+++ b/frontend/src/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Stack, Slider, Text, Group, NumberInput } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
+import SliderWithInput from '../../shared/sliderWithInput/SliderWithInput';
 
 interface Props {
   parameters: AdjustContrastParameters;
@@ -12,31 +13,11 @@ interface Props {
 export default function AdjustContrastBasicSettings({ parameters, onParameterChange, disabled }: Props) {
   const { t } = useTranslation();
 
-  const renderSlider = (label: string, value: number, onChange: (v: number) => void) => (
-    <div>
-      <Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
-      <Group gap="sm" align="center">
-        <div style={{ flex: 1 }}>
-          <Slider min={0} max={200} step={1} value={value} onChange={onChange} disabled={disabled} />
-        </div>
-        <NumberInput
-          value={value}
-          onChange={(v) => onChange(Number(v) || 0)}
-          min={0}
-          max={200}
-          step={1}
-          disabled={disabled}
-          style={{ width: 90 }}
-        />
-      </Group>
-    </div>
-  );
-
   return (
     <Stack gap="md">
-      {renderSlider(t('adjustContrast.contrast', 'Contrast'), parameters.contrast, (v) => onParameterChange('contrast', v as any))}
-      {renderSlider(t('adjustContrast.brightness', 'Brightness'), parameters.brightness, (v) => onParameterChange('brightness', v as any))}
-      {renderSlider(t('adjustContrast.saturation', 'Saturation'), parameters.saturation, (v) => onParameterChange('saturation', v as any))}
+      <SliderWithInput label={t('adjustContrast.contrast', 'Contrast')} value={parameters.contrast} onChange={(v) => onParameterChange('contrast', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.brightness', 'Brightness')} value={parameters.brightness} onChange={(v) => onParameterChange('brightness', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.saturation', 'Saturation')} value={parameters.saturation} onChange={(v) => onParameterChange('saturation', v as any)} disabled={disabled} />
     </Stack>
   );
 }
diff --git a/frontend/src/components/tools/adjustContrast/AdjustContrastColorSettings.tsx b/frontend/src/components/tools/adjustContrast/AdjustContrastColorSettings.tsx
index 3d255ed41..0f2722873 100644
--- a/frontend/src/components/tools/adjustContrast/AdjustContrastColorSettings.tsx
+++ b/frontend/src/components/tools/adjustContrast/AdjustContrastColorSettings.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Stack, Slider, Text, Group, NumberInput } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
+import SliderWithInput from '../../shared/sliderWithInput/SliderWithInput';
 
 interface Props {
   parameters: AdjustContrastParameters;
@@ -12,31 +13,11 @@ interface Props {
 export default function AdjustContrastColorSettings({ parameters, onParameterChange, disabled }: Props) {
   const { t } = useTranslation();
 
-  const renderSlider = (label: string, value: number, onChange: (v: number) => void) => (
-    <div>
-      <Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
-      <Group gap="sm" align="center">
-        <div style={{ flex: 1 }}>
-          <Slider min={0} max={200} step={1} value={value} onChange={onChange} disabled={disabled} />
-        </div>
-        <NumberInput
-          value={value}
-          onChange={(v) => onChange(Number(v) || 0)}
-          min={0}
-          max={200}
-          step={1}
-          disabled={disabled}
-          style={{ width: 90 }}
-        />
-      </Group>
-    </div>
-  );
-
   return (
     <Stack gap="md">
-      {renderSlider(t('adjustContrast.red', 'Red'), parameters.red, (v) => onParameterChange('red', v as any))}
-      {renderSlider(t('adjustContrast.green', 'Green'), parameters.green, (v) => onParameterChange('green', v as any))}
-      {renderSlider(t('adjustContrast.blue', 'Blue'), parameters.blue, (v) => onParameterChange('blue', v as any))}
+      <SliderWithInput label={t('adjustContrast.red', 'Red')} value={parameters.red} onChange={(v) => onParameterChange('red', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.green', 'Green')} value={parameters.green} onChange={(v) => onParameterChange('green', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.blue', 'Blue')} value={parameters.blue} onChange={(v) => onParameterChange('blue', v as any)} disabled={disabled} />
     </Stack>
   );
 }