From 5dc69fb187753bfea7a5d2ba8697d2433259aa2a Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Thu, 15 Jan 2026 09:01:43 +0100
Subject: [PATCH] Adopt Tamagui sliders in admin

---
 resources/js/admin/mobile/BrandingPage.tsx    |  2 +-
 .../mobile/EventLiveShowSettingsPage.tsx      | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/resources/js/admin/mobile/BrandingPage.tsx b/resources/js/admin/mobile/BrandingPage.tsx
index a14a65a..3e70d5e 100644
--- a/resources/js/admin/mobile/BrandingPage.tsx
+++ b/resources/js/admin/mobile/BrandingPage.tsx
@@ -1300,7 +1300,7 @@ function LabeledSlider({
         <Slider.Track height={6} borderRadius={999} backgroundColor={border}>
           <Slider.TrackActive backgroundColor={primary} />
         </Slider.Track>
-        <Slider.Thumb index={0} size="$1" backgroundColor={surface} borderColor={primary} borderWidth={2} />
+        <Slider.Thumb index={0} size="$2" backgroundColor={surface} borderColor={primary} borderWidth={2} />
       </Slider>
     </YStack>
   );
diff --git a/resources/js/admin/mobile/EventLiveShowSettingsPage.tsx b/resources/js/admin/mobile/EventLiveShowSettingsPage.tsx
index 786b602..d0f4da5 100644
--- a/resources/js/admin/mobile/EventLiveShowSettingsPage.tsx
+++ b/resources/js/admin/mobile/EventLiveShowSettingsPage.tsx
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Copy, ExternalLink, Link2, RefreshCcw, RotateCcw, Settings, Share2 } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
+import { Slider } from 'tamagui';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import toast from 'react-hot-toast';
@@ -652,7 +653,7 @@ function EffectSlider({
   disabled?: boolean;
   suffix?: string;
 }) {
-  const { text, muted } = useAdminTheme();
+  const { text, muted, primary, border, surface } = useAdminTheme();
 
   return (
     <YStack space="$1.5">
@@ -665,16 +666,20 @@ function EffectSlider({
           {suffix ? ` ${suffix}` : ''}
         </Text>
       </XStack>
-      <input
-        type="range"
+      <Slider
+        width="100%"
         min={min}
         max={max}
         step={step}
-        value={value}
+        value={[value]}
+        onValueChange={(next) => onChange(next[0] ?? value)}
         disabled={disabled}
-        onChange={(event) => onChange(Number(event.target.value))}
-        style={{ width: '100%' }}
-      />
+      >
+        <Slider.Track height={6} borderRadius={999} backgroundColor={border}>
+          <Slider.TrackActive backgroundColor={primary} />
+        </Slider.Track>
+        <Slider.Thumb index={0} size="$2" backgroundColor={surface} borderColor={primary} borderWidth={2} />
+      </Slider>
     </YStack>
   );
 }