From 650b7004155c8cd96cf4980fa08472c77d150714 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 2 Apr 2026 11:17:54 +0300
Subject: [PATCH] feat(options/media): use a slider for JPEG quality

---
 .../client/src/widgets/type_widgets/options/media.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/media.tsx b/apps/client/src/widgets/type_widgets/options/media.tsx
index ce41dddbb8..e64c6f8114 100644
--- a/apps/client/src/widgets/type_widgets/options/media.tsx
+++ b/apps/client/src/widgets/type_widgets/options/media.tsx
@@ -52,12 +52,11 @@ function ImageSettings() {
                 />
             </OptionsRow>
 
-            <OptionsRow name="image-jpeg-quality" label={t("images.jpeg_quality")} description={t("images.jpeg_quality_description")}>
-                <FormTextBoxWithUnit
-                    min="10" max="100" type="number"
-                    disabled={!compressImages}
-                    unit={t("units.percentage")}
-                    currentValue={imageJpegQuality} onChange={setImageJpegQuality}
+            <OptionsRow name="image-jpeg-quality" label={`${t("images.jpeg_quality")} (${imageJpegQuality ?? 75}%)`} description={t("images.jpeg_quality_description")}>
+                <Slider
+                    min={10} max={100} step={5}
+                    value={parseInt(imageJpegQuality ?? "75", 10)}
+                    onChange={(v) => setImageJpegQuality(String(v))}
                 />
             </OptionsRow>
         </OptionsSection>