Slider elementi, kullanıcıların belirli bir aralıkta tek bir değeri görsel ve etkileşimli bir şekilde seçmesini sağlayan bir input elementidir. Sürgü (slider) mekanizması sayesinde kullanıcılar, minimum ve maksimum değerler arasında kaydırma yaparak istedikleri değeri hızlıca ayarlayabilir.
Slider elementi; ayar, tercih ve seviye belirleme gibi tekil değer seçimi gereken senaryolarda kullanılır.
Slider elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Ses, parlaklık veya zoom seviyesi ayarları
Puan, skor veya seviye belirleme
Filtreleme ekranlarında tek değerli seçimler
Ayar ve tercihlere bağlı yoğunluk veya oran seçimi
Oyun ve etkileşimli uygulamalarda seviye kontrolü
2. Temel Özellikler
Minimum–maksimum değer aralığı: Slider, tanımlanan alt ve üst sınırlar arasında çalışır ve kullanıcı yalnızca bu aralıkta değer seçebilir.
Tekil değer seçimi: Range Slider’dan farklı olarak Slider elementi, aynı anda yalnızca tek bir değer seçilmesini sağlar.
Anlık görsel geri bildirim: Kullanıcı sürgüyü hareket ettirdikçe seçilen değer eş zamanlı olarak güncellenir ve görüntülenir.
Sayısal doğrulama ve sınır kontrolü: Seçilen değer, tanımlanan minimum ve maksimum sınırların dışına çıkamaz.
2.1. Slider Elementi Özellikleri
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Value: Statik bir değer belirleyebilir veya Symbol Picker aracılığıyla bir durum, input elementinin içeriği ya da bir aksiyon sonucuna ait bir değeri dinamik olarak gösterebilirsiniz.
Max: Slider üzerinde seçilebilecek en yüksek değeri belirler (örn. ses kontrolü için 0-100 aralığı).
Min: Slider üzerinde seçilebilecek en düşük değeri belirler (örn. fiyat aralığı için 0’dan başlayarak maksimum değere kadar).
Step: Slider'ın her hareketinde değerin ne kadar değişeceğini belirler (örn. 5 olarak ayarlandığında, yalnızca 5, 10, 15 gibi değerler seçilebilir).
Vertical: Slider’ın yatay (varsayılan) veya dikey olarak görüntülenmesini sağlar.
Handle Color: Slider üzerindeki tutamaç rengini belirler.
Tooltip Visible: Slider tutamaçının üstünde seçilen değerin görüntülenmesini sağlar.
Rail Color: Slider’ın ray rengini ayarlayabilirsiniz. Ray, kaydırıcının hareket ettiği çizgidir. Estetik görünüm ve kullanılabilirlik için özelleştirilebilir.
2.2. Elemente Eklenebilen Aksiyonlar
Slider elementi, kullanıcıların sürgü üzerinden seçtiği değere bağlı olarak olay (event) bazlı aksiyonlar tetiklenmesini destekler. Aksiyonlar, elementin kendisine değil; kullanıcı etkileşimi sonucunda tetiklenen event’e bağlanır.
Slider elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.
Desteklenen Aksiyon Tetikleyicisi
onChange: Kullanıcı slider üzerindeki değeri her değiştirdiğinde tetiklenir.
Kullanım amaçları:
Seçilen değere göre state veya değişken güncellemek
Ayar ve tercih değerlerini anlık olarak uygulamak
Liste, grafik veya diğer UI elementlerini dinamik güncellemek
Değere bağlı hesaplama çalıştırmak
Kullanıcıya canlı geri bildirim göstermek (etiket, tooltip, metin vb.)
Örnek senaryo: Kullanıcı ses seviyesi slider’ını artırdıkça, uygulamadaki ses düzeyi anlık olarak güncellenir ve seçilen değer ekranda gösterilir.
Aksiyonlara İlişkin Temel Kurallar
Slider elementi yalnızca onChange event’i üzerinden aksiyon tetikleyebilir.
Sürgü her hareket ettirildiğinde onChange event’i çalışır.
Aynı onChange event’i için birden fazla aksiyon tanımlanabilir.
Slider elementi, özellikle ayar, seviye ve dinamik geri bildirim gerektiren senaryolarda aksiyonlarla birlikte kullanıldığında sezgisel ve akıcı bir kullanıcı deneyimi sunar.
3. Slider Elementi Nasıl Kullanılır?
Bu bölümde Slider elementinin uçtan uca kullanımını, görseldeki “Duration” (Uçuş Süresi) ekranı üzerinden ele alacağız.
Senaryo: Seçilen Bilete Göre Uçuş Süresi Ayarlama
Bir seyahat uygulamasında kullanıcı, seçtiği uçuş biletine ait gidiş ve dönüş sürelerini incelemek ve ihtiyaç duyarsa filtrelemek için slider bileşenlerini kullanır. Bu yapı sayesinde kullanıcı, uçuş sürelerine göre daha uygun ve konforlu seçenekleri hızlıca değerlendirebilir.
Senaryoda:
Kullanıcı bir uçuş bileti seçtiğinde, seçilen bilete ait uçuş süreleri otomatik olarak ekrana yüklenir.
Ekranda “Uçuş Süresi” başlığı altında iki ayrı slider bulunur:
Outbound flight, San Francisco (SFO): Seçilen biletin gidiş uçuş süresini gösterir.
Return flight, New York (NYC): Seçilen biletin dönüş uçuş süresini gösterir.
Slider’lar, seçilen biletin mevcut uçuş sürelerini varsayılan değer olarak ekranda gösterir.
Kullanıcı slider’ı sağa veya sola kaydırdıkça uçuş süresi değeri anlık olarak güncellenir.
Slider üzerindeki tooltip alanında seçili süre değeri kullanıcıya görsel olarak sunulur.
Adım 1 — Veri Kaynağı İçin Aksiyon Oluşturma
Datasources modülünü açın.
Yeni SQL Action ekleye tıklayın.
Açılan editörde aşağıdaki SQL kodunu ekleyin ve oluşturulan aksiyona GetDurationDefaults adını verin.
SELECT
'Outbound flight, San Francisco (SFO)' AS FlightType,
30 AS MinValue,
300 AS MaxValue,
120 AS DefaultValue,
5 AS StepValue
UNION ALL
SELECT
'Return flight, New York (NYC)' AS FlightType,
30 AS MinValue,
300 AS MaxValue,
150 AS DefaultValue,
5 AS StepValue
Adım 2 — UI Design: Ekranı Oluşturma
UI Design modülünde yeni bir ekran açın (ör. Duration)
Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
Yazıyı Label > Properties > Value > “Uçuş Süresi” olarak güncelleyin.
Yazı stilini Label > Styling > Text > Style > Normal Text ve Heading 2 olarak tanımlayın.
Sayfaya bir Elements > Display > Label elementi daha sürükleyip bırakın.
Yazıyı Label > Properties > Value > Action Results > GetDurationDefaults > First > FlightType tanımlamasını yapın.
Label elementi altına Elements > Numeric Input > Slider elementini sürükleyip bırakın.
Slider değerine Slider > Properties > Value >Action Results > GetDurationDefaults > First > DefaultValue tanımlamasını yapın.
Minimum değeri Slider > Properties > Min >Action Results > GetDurationDefaults > First > MinValue olarak tanımlayın.
Maksimum değeri Slider > Properties > Max >Action Results > GetDurationDefaults > First > MaxValue olarak tanımlayın.
Aralık değeri Slider > Properties > Step >Action Results > GetDurationDefaults > First > StepValue olarak tanımlayın.
Uçuş süresi değerini göstermek için Slider > Properties > TooltipVisible > Açık olarak ayarlayın.
Benzer şekilde Sayfaya Elements > Display > Label elementi daha ekleyin.
Yazıyı Label > Properties > Value > Action Results > GetDurationDefaults > Last > FlightType tanımlamasını yapın.
Label elementi altına bir Elements > Numeric Input > Slider elementi daha sürükleyip bırakın.
Slider değerine Slider > Properties > Value >Action Results > GetDurationDefaults > Last > DefaultValue tanımlamasını yapın.
Minimum değeri Slider > Properties > Min >Action Results > GetDurationDefaults > Last > MinValue olarak tanımlayın.
Maksimum değeri Slider > Properties > Max >Action Results > GetDurationDefaults > Last > MaxValue olarak tanımlayın.
Aralık değeri Slider > Properties > Step >Action Results > GetDurationDefaults > Last > StepValue olarak tanımlayın.
Uçuş süresi değerini göstermek için Slider > Properties > TooltipVisible > Açık olarak ayarlayın.
Preview
Uygulama test edildiğinde, seçilen uçuş biletine ait gidiş ve dönüş süreleri “Uçuş Süresi” başlığı altında iki ayrı slider üzerinde varsayılan değerler olarak görüntülenir. Gidiş uçuşu için San Francisco (SFO) ve dönüş uçuşu için New York (NYC) süreleri slider konumlarına yansıtılır. Kullanıcı slider’ları hareket ettirdikçe uçuş süresi değerleri anlık olarak güncellenir ve seçili süreler tooltip alanlarında görsel olarak gösterilir. Bu yapı sayesinde kullanıcı, uçuş sürelerini kolayca inceleyebilir ve tercihine göre ayarlayabilir.
4. Ortak Özellikler (Properties)
Slider elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Minimum ve maksimum değerleri anlamlı belirleyin. Kullanıcının gerçekten ihtiyaç duyacağı aralık tanımlanmalı, gereksiz geniş aralıklardan kaçınılmalıdır.
Seçilen değeri görünür hale getirin. Slider’ın yanında veya üzerinde seçilen değerin metinsel olarak gösterilmesi, kullanıcı farkındalığını artırır.
6. Kısıtlamalar
Slider elementi yalnızca tek bir değer seçimine olanak tanır. Aralık seçimi gereken senaryolar için Range Slider kullanılmalıdır.
Aksiyonlar yalnızca onChange event’i üzerinden tetiklenebilir.
Manuel sayı girişi desteklenmez; değer yalnızca slider üzerinden belirlenir.
