Adopt Tamagui sliders in admin
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled

This commit is contained in:
Codex Agent
2026-01-15 09:01:43 +01:00
parent 92b341bdcd
commit 5dc69fb187
2 changed files with 13 additions and 8 deletions

View File

@@ -1300,7 +1300,7 @@ function LabeledSlider({
<Slider.Track height={6} borderRadius={999} backgroundColor={border}> <Slider.Track height={6} borderRadius={999} backgroundColor={border}>
<Slider.TrackActive backgroundColor={primary} /> <Slider.TrackActive backgroundColor={primary} />
</Slider.Track> </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> </Slider>
</YStack> </YStack>
); );

View File

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Copy, ExternalLink, Link2, RefreshCcw, RotateCcw, Settings, Share2 } from 'lucide-react'; import { Copy, ExternalLink, Link2, RefreshCcw, RotateCcw, Settings, Share2 } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks'; import { YStack, XStack } from '@tamagui/stacks';
import { Slider } from 'tamagui';
import { SizableText as Text } from '@tamagui/text'; import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite'; import { Pressable } from '@tamagui/react-native-web-lite';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
@@ -652,7 +653,7 @@ function EffectSlider({
disabled?: boolean; disabled?: boolean;
suffix?: string; suffix?: string;
}) { }) {
const { text, muted } = useAdminTheme(); const { text, muted, primary, border, surface } = useAdminTheme();
return ( return (
<YStack space="$1.5"> <YStack space="$1.5">
@@ -665,16 +666,20 @@ function EffectSlider({
{suffix ? ` ${suffix}` : ''} {suffix ? ` ${suffix}` : ''}
</Text> </Text>
</XStack> </XStack>
<input <Slider
type="range" width="100%"
min={min} min={min}
max={max} max={max}
step={step} step={step}
value={value} value={[value]}
onValueChange={(next) => onChange(next[0] ?? value)}
disabled={disabled} 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> </YStack>
); );
} }