RangeSliderAralık Kaydırıcısı

Aralık kaydırıcısı bileşeni, kullanıcının bir dizi değer arasından bir aralık seçmesini sağlamak için kullanılır.

Kullanım Şekli

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

import 'mdui/components/range-slider.js';

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

import type { RangeSlider } from 'mdui/components/range-slider.js';

Kullanım örneği:

<mdui-range-slider></mdui-range-slider>

value özniteliği aracılığıyla aralık kaydırıcısının geçerli değerini okuyabilir veya ayarlayabilirsiniz. Bu öznitelik bir dizidir ve yalnızca JavaScript özelliği aracılığıyla okunabilir ve ayarlanabilir.

<mdui-range-slider class="example-value"></mdui-range-slider>

<script>
  const slider = document.querySelector(".example-value");
  slider.value = [30, 70];
</script>

Kaynak Kodu

Devre Dışı Durumu

Aralık kaydırıcısını devre dışı bırakmak için disabled özniteliğini ekleyin.

<mdui-range-slider disabled></mdui-range-slider>

Kaynak Kodu

Aralık

Aralık kaydırıcısının minimum ve maksimum değerlerini ayarlamak için min ve max özniteliklerini kullanın.

<mdui-range-slider min="10" max="20"></mdui-range-slider>

Kaynak Kodu

Adım Aralığı

Aralık kaydırıcısının adım aralığını ayarlamak için step özniteliğini kullanın.

<mdui-range-slider step="10"></mdui-range-slider>

Kaynak Kodu

Ölçek İşaretleri

Aralık kaydırıcısına ölçek işaretleri eklemek için tickmarks özniteliğini ekleyin.

<mdui-range-slider tickmarks step="10"></mdui-range-slider>

Kaynak Kodu

Metin İpucunu Gizleme

Aralık kaydırıcısındaki metin ipucunu gizlemek için nolabel özniteliğini ekleyin.

<mdui-range-slider nolabel></mdui-range-slider>

Kaynak Kodu

Metin İpucunu Değiştirme

labelFormatter JavaScript özelliği aracılığıyla metin ipucunun görüntüleme biçimini değiştirebilirsiniz. Bu özellik bir fonksiyondur. Fonksiyonun parametresi aralık kaydırıcısının geçerli değeridir, dönüş değeri ise görüntülemek istediğiniz metindir.

<mdui-range-slider class="example-label-formatter"></mdui-range-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
	`defaultValue`	`number[]`	`[]`
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.
	`value`	`number[]`	-
Kaydırıcının dizi biçimindeki değeri, form verileriyle birlikte gönderilir. NOT: Bu özellik HTML özelliği ile başlangıç değeri ayarlanamaz; bu değeri değiştirmek için yalnızca JavaScript özellik değeri değiştirilebilir.
`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

Radio Radyo Butonu

Sonraki Bölüm

Select Seçim Kutusu

RangeSliderAralık Kaydırıcısı

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