8 farklı yaklaşım — Her biri çalışır durumda (Alpine.js). Gerçek player bar stili kullanılmıştır.
Mevcut: Sadece mute/unmute toggle. Hedef: Kademeli ses kontrolü.
Volume ikonuna hover → soldan yatay slider açılır (120px). Mouse çıkınca 300ms delay ile kapanır. Mute için ikona tıklama.
Volume ikonuna hover → yukarı doğru dikey slider açılır (100px). Thumb + tooltip ile % gösterir.
Mute ikonu + yanında sabit yatay slider (80px). Kompakt, progress bar gibi görünür. Hover gerektirmez.
İkona tıkla → yukarıda yuvarlak popup açılır. Yarım daire arc slider. Ortada volume % yazısı. Dışarı tıklayınca kapanır.
5 dikey çubuk (klasik ses göstergesi). Her çubuk bir kademe (20-100%). Aktif kademeler gradient renkli, pasifler gri. Tıklayarak kademe seç.
İkona tıkla → yukarıda zarif panel açılır. Dikey slider + üstte % gösterge + altta mute toggle. Dışarı tıklayınca kapanır.
Hover → yukarıda tooltip balon içinde yatay slider. Balon altında ok işareti. Slider thumb + % label. Şık, minimal.
İkon yanında 5 küçük nokta (horizontal). Her nokta tıklanabilir kademe. Aktif noktalar büyük + renkli, pasifler küçük + gri. Ultra kompakt.
| # | Tasarım | Tetikleme | Hassasiyet | Kompaktlık | Mobil | Not |
|---|---|---|---|---|---|---|
| 1 | Hover Horizontal | Hover | 1% | Orta | Zayıf | Hover mobilde çalışmaz |
| 2 | Hover Vertical | Hover | 1% | İyi | Zayıf | Hover mobilde çalışmaz |
| 3 | Inline Horizontal | Her zaman | 1% | Orta | İyi | Bar genişliği artar |
| 4 | Click Arc | Tıklama | ~5% | İyi | Orta | Görsel etkileyici, hassasiyet düşük |
| 5 | Segmented Steps | Tıklama | 20% | Çok iyi | İyi | Basit, tanıdık, ama kaba |
| 6 | Click Vertical Panel | Tıklama | 1% | İyi | İyi | En dengeli, tıkla aç/kapa |
| 7 | Tooltip Balloon | Hover | 1% | İyi | Zayıf | En şık hover, mobilde sorunlu |
| 8 | Inline Mini Dots | Tıklama | 20% | Çok iyi | İyi | En kompakt, bar genişlemez |