Slider

Ne zaman kullanılır

Slider kesin sayıdan çok göreli konumun önemli olduğu ayarlar içindir: bir düzey, bir yoğunluk, bir filtre aralığı.

Ne zaman kullanılmaz

• Kesin bir sayı için: NumberField kullanın; yazmak sürüklemekten hızlıdır.
• Tutarlar için: tutarı sürükleyerek seçtirmeyin; AmountInput kullanın.
• Az sayıda seçenek için: üç ya da dört adım varsa RadioGroup daha açıktır.

Anatomi

Düzey

40

40

Kaydırın ya da ok tuşlarını kullanın.

AçıkKoyu

Kodu kopyala

import { Slider } from '@bigbang/ui';

export default function Default() {
  return <Slider label="Düzey" defaultValue={40} description="Kaydırın ya da ok tuşlarını kullanın." className="max-w-sm" />;
}

1. Etiket ve değer: Etiket solda, biçimlenmiş değer sağda.
2. İz: 4 px; dolu kısım birincil renkte.
3. Tutamaç: 20 px; 40 px dokunma alanı. İzin uçlarının içinde kalır.
4. Değer balonu: Sürüklerken, üzerine gelince ve klavye odağında.
5. İşaretler ve açıklama: İzin altında.

Davranış

• Tutamaç üzerine gelince biraz büyür, tutulunca biraz daha; bırakınca yaylanarak döner.
• İze tıklamak ya da tuşa basmak tutamacı yumuşakça kaydırır; sürüklerken tutamaç işaretçiyi gecikmesiz izler.
• onValueChange her değişiklikte, onValueCommitted bırakınca bir kez çağrılır; ağır işi ikincisine bağlayın.
• Aralıkta tutamaçlar birbirinin üstünden geçmez.
• orientation="vertical" izi dikey çizer, en az 160 px yüksekliğinde; ses düzeyi gibi bir önizlemenin yanındaki düzey için kullanın.

Yönergeler

• Değeri her zaman görünür tutun (showValue); konum tek başına yeterli değildir.
• Birimi format ile verin; etikete yazmayın.
• Adım sayısı çok büyükse (ör. 1–10.000) kullanıcıya bir NumberField da sunun.

İçerik

Türkçe	İngilizce
alt değer	lower value
üst değer	upper value

İlgili bileşenler

• NumberField: Kesin sayı.
• RadioGroup: Az sayıda seçenek.