[V2] refactor(ui): replace native inputs with Mantine components (#4898)

# Description of Changes

#### Before
<img width="779" height="768" alt="image"
src="https://github.com/user-attachments/assets/a6d63bac-e27d-4bd8-b44e-fa72333f4c59"
/>


#### After
<img width="779" height="768" alt="image"
src="https://github.com/user-attachments/assets/f39d8d92-802a-40ff-a7db-2b6a187b6847"
/>


<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
Co-authored-by: Reece Browne <74901996+reecebrowne@users.noreply.github.com>

frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx

@@ -8,6 +8,7 @@ interface Props {
   min?: number;
   max?: number;
   step?: number;
+  suffix?: string;
 }
 
 export default function SliderWithInput({
@@ -18,11 +19,12 @@ export default function SliderWithInput({
   min = 0,
   max = 200,
   step = 1,
+  suffix = '%',
 }: Props) {
   return (
     <div>
-      <Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
-      <Group gap="sm" align="center">
+      <Text size="sm" fw={500} mb={8}>{label}</Text>
+      <Group gap="md" align="center">
         <div style={{ flex: 1 }}>
           <Slider min={min} max={max} step={step} value={value} onChange={onChange} disabled={disabled} />
         </div>
@@ -33,6 +35,7 @@ export default function SliderWithInput({
           max={max}
           step={step}
           disabled={disabled}
+          suffix={suffix}
           style={{ width: 90 }}
         />
       </Group>

frontend/src/core/components/tools/compress/CompressSettings.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { Stack, Text, NumberInput, Select, Divider, Checkbox, Slider, SegmentedControl } from "@mantine/core";
+import SliderWithInput from '@app/components/shared/sliderWithInput/SliderWithInput';
 import { useTranslation } from "react-i18next";
 import { CompressParameters } from "@app/hooks/tools/compress/useCompressParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
@@ -13,7 +14,6 @@ interface CompressSettingsProps {
 
 const CompressSettings = ({ parameters, onParameterChange, disabled = false }: CompressSettingsProps) => {
   const { t } = useTranslation();
-  const [isSliding, setIsSliding] = useState(false);
   const [imageMagickAvailable, setImageMagickAvailable] = useState<boolean | null>(null);
 
   useEffect(() => {
@@ -47,57 +47,22 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
 
       {/* Quality Adjustment */}
       {parameters.compressionMethod === 'quality' && (
-        <Stack gap="sm">
+        <Stack gap="md">
           <Divider />
-          <Text size="sm" fw={500}>Compression Level</Text>
-          <div style={{ position: 'relative' }}>
-            <input
-              type="range"
-              min="1"
-              max="9"
-              step="1"
-              value={parameters.compressionLevel}
-              onChange={(e) => onParameterChange('compressionLevel', parseInt(e.target.value))}
-              onMouseDown={() => setIsSliding(true)}
-              onMouseUp={() => setIsSliding(false)}
-              onTouchStart={() => setIsSliding(true)}
-              onTouchEnd={() => setIsSliding(false)}
-              disabled={disabled}
-              style={{
-                width: '100%',
-                height: '6px',
-                borderRadius: '3px',
-                background: `linear-gradient(to right, #228be6 0%, #228be6 ${(parameters.compressionLevel - 1) / 8 * 100}%, #e9ecef ${(parameters.compressionLevel - 1) / 8 * 100}%, #e9ecef 100%)`,
-                outline: 'none',
-                WebkitAppearance: 'none'
-              }}
-            />
-            {isSliding && (
-              <div style={{
-                position: 'absolute',
-                top: '-25px',
-                left: `${(parameters.compressionLevel - 1) / 8 * 100}%`,
-                transform: 'translateX(-50%)',
-                background: '#f8f9fa',
-                border: '1px solid #dee2e6',
-                borderRadius: '4px',
-                padding: '2px 6px',
-                fontSize: '12px',
-                color: '#228be6',
-                whiteSpace: 'nowrap'
-              }}>
-                {parameters.compressionLevel}
-              </div>
-            )}
-          </div>
-          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', color: '#6c757d' }}>
-            <span>Min 1</span>
-            <span>Max 9</span>
-          </div>
-          <Text size="xs" c="dimmed" style={{ marginTop: '8px' }}>
-            {parameters.compressionLevel <= 3 && "1-3 PDF compression"}
-            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && "4-6 lite image compression"}
-            {parameters.compressionLevel >= 7 && "7-9 intense image compression Will dramatically reduce image quality"}
+          <SliderWithInput
+            label={t('compress.tooltip.qualityAdjustment.title', 'Compression Level')}
+            value={parameters.compressionLevel}
+            onChange={(value) => onParameterChange('compressionLevel', value)}
+            disabled={disabled}
+            min={1}
+            max={9}
+            step={1}
+            suffix=""
+          />
+          <Text size="xs" c="dimmed" mt={-4}>
+            {parameters.compressionLevel <= 3 && t('compress.compressionLevel.range1to3', 'Lower values preserve quality but result in larger files')}
+            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && t('compress.compressionLevel.range4to6', 'Medium compression with moderate quality reduction')}
+            {parameters.compressionLevel >= 7 && t('compress.compressionLevel.range7to9', 'Higher values reduce file size significantly but may reduce image clarity')}
           </Text>
         </Stack>
       )}