1. Range Slider Elementine Genel Bakış

Range Slider elementi, kullanıcıların uygulama içerisinde belirli bir değer aralığında seçim yapmasını sağlayan görsel bir input elementidir. Kaydırma (slider) tabanlı arayüzü sayesinde kullanıcılar, değerleri manuel olarak yazmak yerine sezgisel ve hızlı bir şekilde belirleyebilir.

1.1. Sık Kullanım Senaryoları

• Fiyat, bütçe veya tutar aralığı seçimi
• Yaş, puan veya skor aralığı belirleme
• Filtreleme ekranlarında minimum–maksimum değer seçimi
• Ayar ve tercih ekranlarında seviye veya oran belirleme
• Analiz ve raporlama ekranlarında aralık bazlı veri seçimi

2. Temel Özellikler

• Minimum–maksimum aralık desteği: Kullanıcılar, tanımlanan alt ve üst sınırlar arasında değer seçimi yapabilir.
• Adım (step) bazlı değer seçimi: Değer artış ve azalışları belirli adımlarla sınırlandırılarak kontrollü seçim yapılması sağlanabilir.
• Anlık değer gösterimi: Kullanıcı slider’ı hareket ettirdikçe seçilen değer eş zamanlı olarak görüntülenir.

2.1. Range Slider Elementi Özellikleri

Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:

• Start Value: Slider'ın varsayılan başlangıç değeridir.
• End Value: Slider'ın varsayılan bitiş değeridir.
• Min: Kullanıcının seçebileceği en düşük değerdir.
• Max: Kullanıcının seçebileceği en yüksek değerdir.
• Step: Slider hareket ettirildiğinde değerin ne kadar değişeceğini belirler (örn. 1 ayarlandığında, slider her hareket ettirildiğinde değer bir birim değişir).
• Vertical: Slider'ın dikey (Vertical) veya yatay (Horizontal) olarak görüntülenmesini sağlar.
• Slider Color: Slider'ın rengini ayarlayabilirsiniz.
• Handle Color: Slider üzerindeki tutamaçın rengini belirler.
• Rail Color: Slider'ın altında bulunan rayın rengini tanımlar.
• Tooltip Visible: Slider sürüklendiğinde değerinin görünmesini sağlar.

2.2. Elemente Eklenebilen Aksiyonlar

Range Slider elementi, kullanıcıların seçtiği aralık değerine bağlı olarak olay (event) bazlı aksiyonlar tetikleyebilen etkileşimli bir input elementidir. Aksiyonlar, elementin kendisine değil; slider üzerinde yapılan kullanıcı etkileşimi sonucunda tetiklenen event’e bağlanır.

Range Slider elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.

Desteklenen Aksiyon Tetikleyicileri

onChange: Kullanıcı slider üzerindeki değeri veya aralığı her değiştirdiğinde tetiklenir.

Kullanım amaçları:

• Seçilen aralığa göre filtreleme yapmak
• State veya değişken güncellemek
• Liste, tablo veya grafik gibi bileşenleri dinamik olarak güncellemek
• Aralık bazlı hesaplamalar çalıştırmak
• Canlı geri bildirim veya bilgilendirici metin göstermek

Örnek senaryo: Kullanıcı fiyat aralığını değiştirdiğinde, ürün listesi seçilen minimum ve maksimum değerlere göre otomatik olarak filtrelenir.

Aksiyonlara İlişkin Temel Kurallar

• Range Slider elementi yalnızca onChange event’i üzerinden aksiyon tetikleyebilir.
• Slider her hareket ettirildiğinde onChange event’i çalışır.
• Aynı onChange event’i için birden fazla aksiyon tanımlanabilir.

Range Slider elementi, özellikle filtreleme, aralık seçimi ve dinamik veri güncelleme senaryolarında aksiyonlarla birlikte kullanıldığında güçlü ve sezgisel bir kullanıcı deneyimi sunar.

3. Range Slider Elementi Nasıl Kullanılır? 

Bu bölümde Range Slider elementinin uçtan uca kullanımını, dinamik değerlerle yapılandırılan basit bir senaryo üzerinden ele alacağız.

Senaryo: Dinamik Fiyat Aralığı Seçimi

Bir e-ticaret uygulamasında kullanıcı, fiyat aralığını seçmek için Range Slider kullanır.
Bu senaryoda amaç filtreleme yapmak değil, yalnızca kullanıcıya bir aralık seçtirmek ve slider’ın Min / Max / StartValue / EndValue / Step değerlerini veriden almak.

Senaryoda:

• Slider sayfa açılışında dinamik olarak yapılandırılır.
• Kullanıcı slider’ı hareket ettirerek aralığı belirler.
• Seçilen aralık ekranda sadece görsel olarak bulunur (liste filtrelenmez).

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “ProductInventory” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  ‍

• Önemli Alan adları:
  
  • ProductName: Stokta yer alan ürünün ekranda görüntülenen ad bilgisini tutar ve listeleme ile satış ekranlarında kullanıcıya gösterilir.
  • Category: Ürünün ait olduğu kategori bilgisini saklar ve filtreleme, raporlama veya gruplama işlemlerinde kullanılır.
  • Price: Ürünün satış fiyatını tutar ve toplam tutar, sepet hesaplama veya fiyat aralığı filtreleme işlemlerinde kullanılır.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve kaydetmek için: 

• Bu senaryoda iki aksiyon kullanılacaktır.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Verileri Getiren Aksiyon (InsertProductInventory): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO ProductInventory (Id, Category, CreatedAt, Price, ProductName)
VALUES
(NEWID(), 'Beverages',  SYSDATETIMEOFFSET(), 18.50, 'Mineral Water'),
(NEWID(), 'Beverages',  SYSDATETIMEOFFSET(), 32.00, 'Orange Juice'),
(NEWID(), 'Snacks',     SYSDATETIMEOFFSET(), 22.75, 'Potato Chips'),
(NEWID(), 'Snacks',     SYSDATETIMEOFFSET(), 15.25, 'Chocolate Bar'),
(NEWID(), 'Dairy',      SYSDATETIMEOFFSET(), 48.90, 'Cheddar Cheese'),
(NEWID(), 'Bakery',     SYSDATETIMEOFFSET(), 12.50, 'Whole Wheat Bread'),
(NEWID(), 'Frozen',     SYSDATETIMEOFFSET(), 95.00, 'Frozen Pizza'),
(NEWID(), 'Meat',       SYSDATETIMEOFFSET(), 185.75,'Chicken Breast');

Uygularken ProductInventory kısmını silip tekrar ProductInventory yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir. Şema adını aşağıdaki aksiyon içerisinde de kullanacaksınız.

• Taranan Barkoda Göre Ürün Getiren Aksiyon (GetProductsByValueRange):
  

SELECT
    Id,
    ProductName,
    Category,
    Price,
    CreatedAt
FROM ProductInventory
WHERE Price BETWEEN @MinValue AND @MaxValue
ORDER BY Price ASC;

Uygularken ProductInventory kısmını silip tekrar ProductInventory yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir. Şema adını aşağıdaki aksiyon içerisinde de kullanacaksınız.

Adım 3 – Sayfayı Oluşturma

• UI Design modülünü açın:
• PriceRange adında yeni bir ekran oluşturun.

Adım 4 – Sayfaya Element Ekleme ve Yapılandırma

• Sayfaya Elements > Numeric Input > Range Slider elementini sürükleyip bırakın.
• Ekran açıldığında aralık değerlerini Range Slider > Properties > StartValue > 10 ve EndValue > 75 olarak ayarlayın.

• Range Slider içerisindeki minimum ve maksimum değerleri Range Slider > Properties > Min > 0 ve Max > 200 olarak ayarlayın.
  

• Slider arasındaki rengi ayarlamak için Range Slider > Properties > SliderColor > 72C240 yeşil rengi ayarlayın.
  

• Handle renkleri için Range Slider > Properties > SliderColor > 72C240 yeşil rengi ayarlayın.
  

• Çizgi rengi için Range Slider > Properties > SliderColor > D9D9D9 rengi ayarlayın.
  

• Seçili aralık değerlerini görmek için Range Slider > Properties > TooltipVisible > Açık olarak ayarlayın.
  

• Ekrana pageInit Action ekleyin: Add Action > Initial Action > Custom > Managed DB > GetProductsByValueRange.
  

• Aksiyon parametrelerinden MinValue alanına GetProductsByValueRange > MinValue > Range Slider > StartValue tanımlamasını yapın.
  

•  Aksiyon parametrelerinden MinValue alanına GetProductsByValueRange > MinValue > Range Slider > StartValue tanımlamasını yapın.
  

• Değişimleri anlık gösterebilmek için Range Slider’a Range Slider > Add Action > onChange > Custom > Managed DB > GetProductsByValueRange aksiyonunu ekleyin.
  

•  Aksiyon parametrelerinden MinValue alanına GetProductsByValueRange > MinValue > Range Slider > StartValue tanımlamasını yapın.
  

•  Aksiyon parametrelerinden MinValue alanına GetProductsByValueRange > MinValue > Range Slider > StartValue tanımlamasını yapın.
  

•  Sayfaya sol yan taraftaki Action Tree alanından GetProductsByValueRange aksiyonun yanındaki mavi ikodan sayfaya sürükleyin.
  

•  Son olarak açılan ekranda aşağıdaki tanımlamaları yapın.
  

Preview

Uygulama test edildiğinde, ekranın üst kısmında yer alan Range Slider üzerinden minimum ve maksimum fiyat aralığı seçilerek ürün listesi dinamik olarak filtrelenir. Slider üzerinde belirlenen değerler anlık olarak güncellenir ve bu aralığa uyan ürünler tabloda otomatik şekilde görüntülenir. Range Slider tutamaçlarının üzerinde yer alan tooltip alanlarında seçili minimum ve maksimum değerler kullanıcıya görsel olarak gösterilir. Kullanıcı, fiyat aralığını daraltıp genişleterek yalnızca bütçesine veya aradığı kriterlere uygun ürünleri hızlı ve kolay bir şekilde listeleyebilir. Bu yapı sayesinde ürünler, seçilen fiyat aralığına göre anında güncellenen interaktif bir filtreleme deneyimi sunar.

4. Ortak Özellikler (Properties)

Range 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:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Minimum ve maksimum değerleri senaryoya uygun belirleyin.Kullanıcının gerçekten ihtiyaç duyacağı aralık tanımlanmalı; gereğinden geniş veya dar aralıklardan kaçınılmalıdır.
• Step değerini bilinçli kullanın. Çok küçük step değerleri hassasiyet sağlarken, kullanıcı deneyimini zorlaştırabilir. Senaryoya uygun adım aralığı seçilmelidir.
• Seçilen değeri görsel veya metinsel olarak destekleyin. Slider’ın yanında veya üzerinde seçilen minimum–maksimum değerlerin gösterilmesi, kullanıcı farkındalığını artırır.
• onChange event’ini performans açısından dikkatli yönetin. Slider her hareket ettiğinde tetiklendiği için, ağır hesaplamalar veya API çağrıları bu event’e bağlanırken dikkatli olunmalıdır.

6. Kısıtlamalar

• Aksiyonlar yalnızca onChange event’i üzerinden tetiklenebilir.
• Yüksek doğruluk gerektiren sayısal girişler için Number Input veya Currency elementi tercih edilmelidir.