valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: make volume and pan sliders inline with labels

Browse Source 
Changed slider layout to horizontal:
- Label | Slider | Value all in one row
- Volume: "Volume" icon + label (64px) | slider (flex) | "80%" (40px)
- Pan: "Pan" label (64px) | slider (flex) | "C/L50/R50" (40px)
- Much more compact and professional looking
- Similar to professional DAW mixer strips

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-18 06:59:24 +01:00
parent 401bab8886
commit b8d2cb9585
1 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/tracks/Track.tsx
View File

@@ -262,44 +262,44 @@ export function Track({
{!track.collapsed && ( {!track.collapsed && (
<> <>
{/* Volume */} {/* Volume */}
<div className="space-y-1"> <div className="flex items-center gap-2">
<div className="flex items-center justify-between"> <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
<label className="text-xs text-muted-foreground flex items-center gap-1"> <Volume2 className="h-3 w-3" />
<Volume2 className="h-3 w-3" /> Volume
Volume </label>
</label> <div className="flex-1">
<span className="text-xs text-muted-foreground"> <Slider
{Math.round(track.volume * 100)}% value={track.volume}
</span> onChange={onVolumeChange}
min={0}
max={1}
step={0.01}
/>
</div> </div>
<Slider <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
value={track.volume} {Math.round(track.volume * 100)}%
onChange={onVolumeChange} </span>
min={0}
max={1}
step={0.01}
/>
</div> </div>
{/* Pan */} {/* Pan */}
<div className="space-y-1"> <div className="flex items-center gap-2">
<div className="flex items-center justify-between"> <label className="text-xs text-muted-foreground w-16 flex-shrink-0">Pan</label>
<label className="text-xs text-muted-foreground">Pan</label> <div className="flex-1">
<span className="text-xs text-muted-foreground"> <Slider
{track.pan === 0 value={track.pan}
? 'C' onChange={onPanChange}
: track.pan < 0 min={-1}
? `L${Math.round(Math.abs(track.pan) * 100)}` max={1}
: `R${Math.round(track.pan * 100)}`} step={0.01}
</span> />
</div> </div>
<Slider <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
value={track.pan} {track.pan === 0
onChange={onPanChange} ? 'C'
min={-1} : track.pan < 0
max={1} ? `L${Math.abs(Math.round(track.pan * 100))}`
step={0.01} : `R${Math.round(track.pan * 100)}`}
/> </span>
</div> </div>
</> </>
)} )}