Use Tamagui slider for branding controls

resources/js/admin/mobile/BrandingPage.tsx

@@ -5,6 +5,7 @@ import { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save,
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
+import { Slider } from 'tamagui';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
 import { TenantEvent, getEvent, updateEvent, getTenantFonts, getTenantSettings, TenantFont, WatermarkSettings, trackOnboarding } from '../api';
@@ -1275,7 +1276,7 @@ function LabeledSlider({
   disabled?: boolean;
   suffix?: string;
 }) {
-  const { textStrong, muted, primary } = useAdminTheme();
+  const { textStrong, muted, primary, border, surface } = useAdminTheme();
   return (
     <YStack space="$1.5">
       <XStack alignItems="center" justifyContent="space-between">
@@ -1287,16 +1288,20 @@ function LabeledSlider({
           {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%', height: 28, accentColor: primary }}
-      />
+      >
+        <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>
     </YStack>
   );
 }