Adopt Tamagui sliders in admin

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>
   );

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>
   );
 }