Slider

Yatay bir track üzerinde bir değer ya da iki tutamaçla bir aralık seçtirir. Değerler step'e oturur; track dir="rtl"'yi izler.

KararlıKaynak kod

Ses

%40

const [value, setValue] = useState([40]);

<span id="volume">Ses</span>
<Slider aria-labelledby="volume" value={value} onValueChange={setValue} getValueText={(v) => "%" + v} />

Import

import { Slider } from "@meridui/react";

Örnekler

Aralık

İki değer ver. Tutamaçlar birbirini geçemez; minStepsBetweenThumbs aralarında mesafe bırakır. Her tutamağa thumbLabels ile ad ver, değerlere getValueText ile okunur bir biçim ver.

Fiyat

₺200 – ₺800

const lira = new Intl.NumberFormat("tr-TR", { style: "currency", currency: "TRY", maximumFractionDigits: 0 });

<Slider
value={value}
onValueChange={setValue}
min={0}
max={1000}
step={10}
minStepsBetweenThumbs={5}
thumbLabels={["En düşük fiyat", "En yüksek fiyat"]}
getValueText={(v) => lira.format(v)}
name="price"
/>

Ondalık adım, devre dışı ve RTL

<Slider aria-label="Opaklık" defaultValue={[0.5]} min={0} max={1} step={0.05} />
<Slider aria-label="Devre dışı" defaultValue={[30]} disabled />
<div dir="rtl">
<Slider aria-label="Sağdan sola" defaultValue={[25]} />
</div>

API referansı

Bir div render'lar; diğer div attribute'ları ve ref ona gider. Tek tutamaçta kökteki aria-label / aria-labelledby tutamağa ad verir.

Prop	Tip	Varsayılan	Açıklama
`value`	`number[]`	–	Controlled değerler: tekli için bir, aralık için iki.
`defaultValue`	`number[]`	`[min]`	Uncontrolled kullanımda başlangıç değerleri.
`onValueChange`	`(value: number[]) => void`	–	Sürüklerken ya da tuşa basarken her değişimde çağrılır.
`onValueCommit`	`(value: number[]) => void`	–	Sürükleme bitince ya da tuşa basıldıktan sonra çağrılır.
`min`	`number`	`0`	En düşük değer.
`max`	`number`	`100`	En yüksek değer.
`step`	`number`	`1`	Artış miktarı.
`largeStep`	`number`	`step * 10`	Page Up / Page Down ve Shift + ok tuşlarının artışı.
`minStepsBetweenThumbs`	`number`	`0`	Aralık tutamakları arasındaki en az mesafe, adım cinsinden.
`thumbLabels`	`string[]`	`aralıkta ["Minimum", "Maximum"]`	Her tutamağın erişilebilir adı.
`getValueText`	`(value: number, index: number) => string`	–	aria-valuetext; ör. birim ya da para birimiyle.
`disabled`	`boolean`	`false`	Slider'ı devre dışı bırakır.
`name`	`string`	–	Tutamak başına gizli input: tekli için name, aralık için name[].

Stil verme

Sınıf	Eleman
`.mrd-slider`	Kök (`data-disabled`)
`.mrd-slider__track`	Track ve işaretçi hedefi
`.mrd-slider__range`	Track'in dolu kısmı
`.mrd-slider__thumb`	Tutamak, `role="slider"`

Her tutamak aria-valuenow, aria-valuemin ve aria-valuemax taşıyan bir role="slider"'dır. Aralıkta her tutamağın sınırı diğer tutamağın değeridir; ekran okuyucular gerçek sınırları okur. Track'in 24px'lik, her tutamağın 24px'lik bir tıklama alanı vardır (dokunmatik ekranlarda 44px).

Tuş	Ne yapar
`ArrowRightArrowUp`	step kadar artırır (RTL'de ArrowRight azaltır).
`ArrowLeftArrowDown`	step kadar azaltır (RTL'de ArrowLeft artırır).
`PageUpPageDown`	largeStep kadar artırır / azaltır. Shift + ok tuşları da aynısını yapar.
`HomeEnd`	En düşük / en yüksek değere gider.

İlgili sayfalar

NumberInput — kesin sayı önemliyse.