Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance slider UX

Browse source 
Make sliders "snappy" to multiples of 10 and add indicators to both ends.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-21 07:44:25 +00:00
parent b725498696
commit 615c43f72a
2 changed files with 38 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/BalancedTernaryGame.tsx
View file

@ -183,14 +183,29 @@ const BalancedTernaryGame: React.FC<BalancedTernaryGameProps> = ({ showSocialSha
<Card className="p-6"> <Card className="p-6">
<div className="space-y-4"> <div className="space-y-4">
<Label className="text-lg font-semibold">Target Number Range</Label> <Label className="text-lg font-semibold">Target Number Range</Label>
<div className="space-y-2"> <div className="space-y-4">
<div className="flex justify-between text-sm text-muted-foreground"> <div className="flex justify-between text-sm text-muted-foreground">
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-primary rounded-full"></div>
<span>Min: {targetRange[0]}</span> <span>Min: {targetRange[0]}</span>
</div>
<div className="flex items-center space-x-2">
<span>Max: {targetRange[1]}</span> <span>Max: {targetRange[1]}</span>
<div className="w-3 h-3 bg-primary rounded-full"></div>
</div>
</div> </div>
<Slider <Slider
value={targetRange} value={targetRange}
onValueChange={(value) => setTargetRange(value as [number, number])} onValueChange={(value) => {
// Snap to multiples of 10 if close enough
const snappedValue = value.map(v => {
const remainder = Math.abs(v) % 10;
if (remainder <= 2) return v - Math.sign(v) * remainder;
if (remainder >= 8) return v + Math.sign(v) * (10 - remainder);
return v;
});
setTargetRange(snappedValue as [number, number]);
}}
min={-3280} min={-3280}
max={3280} max={3280}
step={1} step={1}

19
src/components/TernaryNumberGame.tsx
View file

@ -134,14 +134,29 @@ const TernaryNumberGame: React.FC<TernaryNumberGameProps> = ({ showSocialShare =
<Card className="p-6"> <Card className="p-6">
<div className="space-y-4"> <div className="space-y-4">
<Label className="text-lg font-semibold">Target Number Range</Label> <Label className="text-lg font-semibold">Target Number Range</Label>
<div className="space-y-2"> <div className="space-y-4">
<div className="flex justify-between text-sm text-muted-foreground"> <div className="flex justify-between text-sm text-muted-foreground">
<div className="flex items-center space-x-2">
<div className="w-3 h-3 bg-primary rounded-full"></div>
<span>Min: {targetRange[0]}</span> <span>Min: {targetRange[0]}</span>
</div>
<div className="flex items-center space-x-2">
<span>Max: {targetRange[1]}</span> <span>Max: {targetRange[1]}</span>
<div className="w-3 h-3 bg-primary rounded-full"></div>
</div>
</div> </div>
<Slider <Slider
value={targetRange} value={targetRange}
onValueChange={(value) => setTargetRange(value as [number, number])} onValueChange={(value) => {
// Snap to multiples of 10 if close enough
const snappedValue = value.map(v => {
const remainder = v % 10;
if (remainder <= 2) return v - remainder;
if (remainder >= 8) return v + (10 - remainder);
return v;
});
setTargetRange(snappedValue as [number, number]);
}}
min={1} min={1}
max={3280} max={3280}
step={1} step={1}