SliderKaydırıcı

Kaydırıcı bileşeni, kullanıcının kaydırıcıyı sürükleyerek bir dizi değer arasından seçim yapmasına olanak tanır.

Kullanım Şekli

Bileşeni ihtiyacınıza göre içe aktarın:

import 'mdui/components/slider.js';

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

import type { Slider } from 'mdui/components/slider.js';

Kullanım örneği:

<mdui-slider></mdui-slider>

Metin ipucunun görüntüleme biçimini değiştirmek için labelFormatter JavaScript özelliğini kullanabilirsiniz. Bu özellik bir fonksiyondur. Fonksiyon, geçerli kaydırıcı değerini parametre olarak alır ve görüntülemek istediğiniz metni döndürür.

<mdui-slider class="example-label-formatter"></mdui-slider>

<script>
  const slider = document.querySelector(".example-label-formatter");
  slider.labelFormatter = (value) => `${value} saat`;
</script>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`value`	`value`	`number`	`0`
Form verileriyle birlikte gönderilen kaydırıcı değeri.
	`defaultValue`	`number`	`0`
Varsayılan değer. Form sıfırlandığında bu varsayılan değere sıfırlanır. Bu özellik yalnızca JavaScript özelliği ile ayarlanabilir.
`autofocus`	`autofocus`	`boolean`	`false`
Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
`tabindex`	`tabIndex`	`number`	-
Sekme tuşu ile odak geçişi yapılırken öğenin sırası.
`min`	`min`	`number`	`0`
Kaydırıcının minimum değeri. Varsayılan `0`'dır.
`max`	`max`	`number`	`100`
Kaydırıcının maksimum değeri. Varsayılan `100`'dür.
`step`	`step`	`number`	`1`
Adım aralığı. Varsayılan `1`'dir.
`tickmarks`	`tickmarks`	`boolean`	`false`
İşaret çentiklerinin eklenip eklenmeyeceği.
`nolabel`	`nolabel`	`boolean`	`false`
Metin ipucunun gizlenip gizlenmeyeceği.
`disabled`	`disabled`	`boolean`	`false`
Devre dışı olup olmadığı.
`form`	`form`	`string`	-
İlişkili `<form>` öğesi. Bu özelliğin değeri, aynı sayfadaki bir `<form>` öğesinin `id`'si olmalıdır. Bu özellik belirtilmezse, öğe bir `<form>` öğesinin alt öğesi olmalıdır. Bu özellik sayesinde öğeyi yalnızca `<form>` öğesinin alt öğesi olarak değil, sayfanın herhangi bir yerine yerleştirebilirsiniz.
`name`	`name`	`string`	`''`
Form verileriyle birlikte gönderilen kaydırıcı adı.
	`validity`	`ValidityState`	-
Form doğrulama durumu nesnesi. Ayrıntılar için `ValidityState`'e bakın.
	`validationMessage`	`string`	-
Form doğrulaması başarısız olduğunda bu özellik bir bilgilendirme mesajı içerir. Doğrulama başarılı olduğunda ise boş bir dize olur.
	`labelFormatter`	`(value: number) => string`	-
Etiketin görüntüleme biçimini özelleştirmek için kullanılan işlev. İşlevin parametresi kaydırıcının geçerli değeridir ve dönüş değeri görüntülenmesi istenen metindir.

Yöntemler

Ad	Parametreler	Dönüş Değeri
`click`		`void`
Öğeye fare tıklamasını simüle eder.
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Odağı geçerli öğeye ayarlar. Parametre olarak bir nesne iletilebilir. Nesnenin özellikleri şunlardır: `preventScroll`: Varsayılan olarak, öğe odaklandıktan sonra sayfa, öğeyi görünüme getirmek için kayar. Sayfanın kaydırılmasını istemiyorsanız, bu özelliği `true` olarak ayarlayabilirsiniz.
`blur`		`void`
Odağı geçerli öğeden kaldırır.
`checkValidity`		`boolean`
Form alanının doğrulamayı geçip geçmediğini kontrol eder. Geçmezse `false` döndürür ve `invalid` olayını tetikler; geçerse `true` döndürür.
`reportValidity`		`boolean`
Form alanının doğrulamayı geçip geçmediğini kontrol eder. Geçmezse `false` döndürür ve `invalid` olayını tetikler; geçerse `true` döndürür. Doğrulama başarısız olduğunda, bileşen üzerinde doğrulama başarısızlığına dair bir ipucu da gösterir.
`setCustomValidity`	`message: string`	`void`
Özel bir hata ipucu metni ayarlar. Bu metin boş değilse, alanın doğrulamayı geçmediği anlamına gelir.

Olaylar

Ad
`focus`
Odak alındığında tetiklenir.
`blur`
Odak kaybedildiğinde tetiklenir.
`change`
Değer değiştiğinde ve odak kaybedildiğinde tetiklenir.
`input`
Değer değiştiğinde tetiklenir.
`invalid`
Form alanı doğrulaması başarısız olduğunda tetiklenir.

CSS Parts

Ad
`track-inactive`
Etkin olmayan durumdaki iz.
`track-active`
Etkin durumdaki iz.
`handle`
Kontrol kolu.
`label`
İpucu metni.
`tickmark`
İşaret çentiği.

Önceki Bölüm

SegmentedButton Segmentli Buton

Sonraki Bölüm

Snackbar Snackbar

SliderKaydırıcı

Kullanım Şekli

Örnekler

Varsayılan Değer

Devre Dışı Durumu

Aralık

Adım Aralığı

Ölçek İşaretleri

Metin İpucunu Gizleme

Metin İpucunu Değiştirme

API

Özellikler

Yöntemler

Olaylar

CSS Parts