From f28a2d1eab540634144a9dcdad981a2f1e97f335 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 25 Feb 2026 18:18:03 +0100
Subject: [PATCH] refactor: replace html range input with shadcn slider in
 batch operations

---
 app/(app)/pastel/batch/page.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/(app)/pastel/batch/page.tsx b/app/(app)/pastel/batch/page.tsx
index 4700df9..3515a3d 100644
--- a/app/(app)/pastel/batch/page.tsx
+++ b/app/(app)/pastel/batch/page.tsx
@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
+import { Slider } from '@/components/ui/slider';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { PaletteGrid } from '@/components/pastel/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/ExportMenu';
@@ -143,17 +144,21 @@ export default function BatchPage() {
                   </SelectContent>
                 </Select>
 
-                <div>
-                  <label className="text-sm font-medium mb-2 block">
-                    Amount: {operation === 'rotate' ? (amount * 360).toFixed(0) + '°' : (amount * 100).toFixed(0) + '%'}
-                  </label>
-                  <Input
-                    type="range"
-                    min="0"
-                    max="1"
-                    step="0.01"
-                    value={amount}
-                    onChange={(e) => setAmount(parseFloat(e.target.value))}
+                <div className="space-y-4 pt-2">
+                  <div className="flex items-center justify-between">
+                    <label className="text-sm font-medium">
+                      Amount
+                    </label>
+                    <span className="text-xs text-muted-foreground">
+                      {operation === 'rotate' ? (amount * 360).toFixed(0) + '°' : (amount * 100).toFixed(0) + '%'}
+                    </span>
+                  </div>
+                  <Slider
+                    min={0}
+                    max={1}
+                    step={0.01}
+                    value={[amount]}
+                    onValueChange={(vals) => setAmount(vals[0])}
                   />
                 </div>