Sliders

Slider adalah kontrol yang memungkinkan pengguna memilih dari berbagai nilai dengan memindahkan kontrol jempol di sepanjang trek.

Apakah ini kontrol yang tepat?

Gunakan penggeser saat Anda ingin pengguna Anda dapat mengatur nilai yang ditentukan dan berdekatan (seperti volume atau kecerahan) atau rentang nilai diskrit (seperti pengaturan resolusi layar).

Slider adalah pilihan yang baik ketika Anda tahu bahwa pengguna menganggap nilai sebagai jumlah relatif, bukan nilai numerik. Misalnya, pengguna berpikir untuk mengatur volume audio mereka ke rendah atau sedang—bukan tentang mengatur nilai ke 2 atau 5.

Jangan gunakan slider untuk pengaturan biner. Gunakan sakelar pengalih sebagai gantinya.

Berikut adalah beberapa faktor tambahan yang perlu dipertimbangkan saat memutuskan apakah akan menggunakan slider:

• Apakah konteks tampak seperti kuantitas relatif? Jika tidak, gunakan tombol radio atau kotak daftar.
• Apakah pengaturan merupakan nilai numerik yang persis dan sudah diketahui? Jika demikian, gunakan kotak teks numerik.
• Apakah pengguna akan mendapat manfaat dari umpan balik instan tentang efek perubahan pengaturan? Jika demikian, gunakan slider. Misalnya, pengguna dapat memilih warna dengan lebih mudah dengan segera melihat efek perubahan pada nilai hue, saturasi, atau luminositas.
• Apakah pengaturan memiliki rentang empat nilai atau lebih? Jika tidak, gunakan tombol radio.
• Bisakah pengguna mengubah nilainya? Slider adalah untuk interaksi pengguna. Jika pengguna tidak dapat mengubah nilainya, gunakan teks baca-saja sebagai gantinya.

Jika Anda memutuskan antara slider dan kotak teks numerik, gunakan kotak teks numerik jika:

• Ruang layar ketat.
• Pengguna cenderung lebih suka menggunakan keyboard.

Gunakan pengguncur jika:

• Pengguna akan mendapat manfaat dari umpan balik instan.

Recommendations

• Ukuran kontrol sehingga pengguna dapat dengan mudah mengatur nilai yang mereka inginkan. Untuk pengaturan dengan nilai diskrit, pastikan pengguna dapat dengan mudah memilih nilai apa pun menggunakan mouse. Pastikan titik akhir slider selalu pas di dalam batas tampilan.
• Berikan umpan balik langsung saat atau setelah pengguna membuat pilihan (jika praktis). Misalnya, kontrol volume Windows berbunyi bip untuk menunjukkan volume audio yang dipilih.
• Gunakan label untuk memperlihatkan rentang nilai. Pengecualian: Jika penggeser berorientasi vertikal dan label atas adalah Maksimum, Tinggi, Lebih, atau setara, Anda dapat menghilangkan label lain karena maknanya jelas.
• Nonaktifkan semua label terkait atau visual umpan balik saat Anda menonaktifkan slider.
• Pertimbangkan arah teks saat mengatur arah alur dan/atau orientasi slider Anda. Skrip mengalir dari kiri ke kanan dalam beberapa bahasa, dan dari kanan ke kiri di bahasa lain.
• Jangan gunakan slider sebagai indikator kemajuan.
• Jangan ubah ukuran jempol pengguncur dari ukuran default.
• Jangan membuat slider berkelanjutan jika rentang nilai besar dan pengguna kemungkinan besar akan memilih salah satu dari beberapa nilai perwakilan dari rentang. Sebagai gantinya, gunakan nilai-nilai tersebut sebagai satu-satunya langkah yang diizinkan. Misalnya, jika nilai waktu mungkin hingga 1 bulan tetapi pengguna hanya perlu memilih dari 1 menit, 1 jam, 1 hari, atau 1 bulan, lalu buat penggeser dengan hanya 4 tahap langkah.

Panduan penggunaan tambahan

Memilih tata letak yang tepat: horizontal atau vertikal

Anda dapat mengatur penggeser Anda secara horizontal atau vertikal. Gunakan panduan ini untuk menentukan tata letak mana yang akan digunakan.

• Gunakan orientasi alami. Misalnya, jika slider mewakili nilai dunia nyata yang biasanya ditampilkan secara vertikal (seperti suhu), gunakan orientasi vertikal.
• Jika kontrol digunakan untuk mencari dalam media, seperti di aplikasi video, gunakan orientasi horizontal.
• Saat menggunakan penggeser di halaman yang dapat digerakkan ke satu arah (secara horizontal atau vertikal), gunakan orientasi yang berbeda untuk penggeser daripada arah panning. Jika tidak, pengguna mungkin menggesek slider dan mengubah nilainya secara tidak sengaja saat mereka mencoba menggeser halaman.
• Jika Anda masih tidak yakin orientasi mana yang akan digunakan, gunakan orientasi yang paling sesuai dengan tata letak halaman Anda.

Arah jangkauan

Arah rentang adalah arah Anda memindahkan slider saat Anda menggesernya dari nilai saat ini ke nilai maksnya.

• Untuk slider vertikal, tempatkan nilai terbesar di bagian atas slider, terlepas dari arah membaca. Misalnya, untuk slider volume, selalu letakkan pengaturan volume maksimum di bagian atas pengguncur. Untuk jenis nilai lain (seperti hari dalam seminggu), ikuti arah baca halaman.
• Untuk gaya horizontal, letakkan nilai yang lebih rendah di sisi kiri penggeser untuk tata letak halaman kiri-ke-kanan, dan di sebelah kanan untuk tata letak halaman kanan-ke-kiri.
• Satu pengecualian untuk pedoman sebelumnya adalah untuk bilah pencarian media: selalu letakkan nilai yang lebih rendah di sisi kiri slider.

Langkah-langkah dan tanda centang

• Gunakan titik langkah jika Anda tidak ingin penggeser mengizinkan nilai arbitrer antara min dan maks. Misalnya, jika Anda menggunakan penggeser untuk menentukan jumlah tiket film yang akan dibeli, jangan izinkan nilai titik mengambang. Tetapkan nilai langkah menjadi 1.
• Jika Anda menentukan langkah-langkah (juga dikenal sebagai titik rekam jepret), pastikan bahwa langkah terakhir selaras dengan nilai maks penggunjuk.
• Gunakan tanda centang saat Anda ingin menampilkan lokasi nilai utama atau signifikan kepada pengguna. Misalnya, penggeser yang mengontrol zoom mungkin memiliki tanda centang untuk 50%, 100%, dan 200%.
• Tampilkan tanda centang saat pengguna perlu mengetahui perkiraan nilai pengaturan.
• Tampilkan tanda centang dan label nilai saat pengguna perlu mengetahui nilai yang tepat dari pengaturan yang mereka pilih, tanpa berinteraksi dengan kontrol. Jika tidak, mereka dapat menggunakan tipsalat nilai untuk melihat nilai yang tepat.
• Selalu tampilkan tanda centang saat titik langkah tidak jelas. Misalnya, jika penggeser lebarnya 200 piksel dan memiliki 200 titik snap, Anda dapat menyembunyikan tanda centang karena pengguna tidak akan melihat perilaku snapping. Tetapi jika hanya ada 10 titik rekam jepret, tampilkan tanda centang.

Labels

• Label penggerak

  Label penggunjuk menunjukkan untuk apa penggunjuk digunakan.

  • Gunakan label tanpa tanda baca akhir (ini adalah konvensi untuk semua label kontrol).
  • Posisikan label di atas slider saat slider berada dalam formulir yang menempatkan sebagian besar labelnya di atas kontrolnya.
  • Tempatkan label di samping ketika penggeser dalam bentuk yang menempatkan sebagian besar labelnya di samping kontrol.
  • Hindari menempatkan label di bawah penggeser karena jari pengguna mungkin menghilangkan label saat pengguna menyentuh penggeser.

• Label Rentang

  Rentang, atau isi, label memperjelas nilai minimal dan maksimal slider.

  • Berikan label pada dua ujung rentang penggeser, kecuali jika orientasi vertikal membuatnya tidak perlu.
  • Gunakan hanya satu kata, jika memungkinkan, untuk setiap label.
  • Jangan gunakan tanda baca akhir.
  • Pastikan label ini deskriptif dan paralel. Contoh: Maksimum/Minimum, Lebih/Kurang, Rendah/Tinggi, Lembut/Keras.

• Label kualitas

  Label nilai menampilkan nilai slider saat ini.

  • Jika Anda memerlukan label nilai, letakkan di bawah penggeser.
  • Tengahkan teks relatif terhadap elemen kontrol dan sertakan satuan (seperti piksel).
  • Karena penunjuk penggeser ditutupi selama menggeser, pertimbangkan untuk memperlihatkan nilai saat ini dengan cara lain, seperti melalui label atau visual lainnya. Pengaturan penggeser untuk ukuran teks dapat menampilkan beberapa teks sampel dengan ukuran yang tepat di sebelah penggeser.

Tampilan dan interaksi

Penggeser terdiri dari trek dan penunjuk. Trek adalah bilah (yang secara opsional dapat menampilkan berbagai gaya tanda centang) yang mewakili rentang nilai yang dapat dimasukkan. Jempol adalah penunjuk, yang dapat diposisikan pengguna dengan mengetuk trek atau dengan menggeser bolak-balik di atasnya.

Penggeser memiliki target sentuhan besar. Untuk mempertahankan aksesibilitas sentuh, penggeser harus diposisikan cukup jauh dari tepi layar.

Saat Anda merancang slider kustom, pertimbangkan cara untuk menyajikan semua informasi yang diperlukan kepada pengguna dengan gangguan sesedikit mungkin. Gunakan label nilai jika pengguna perlu mengetahui unit untuk memahami pengaturan; temukan cara kreatif untuk mewakili nilai-nilai ini secara grafis. Slider yang mengontrol volume, misalnya, dapat menampilkan grafik pembicara tanpa gelombang suara di ujung minimum slider, dan grafik speaker dengan gelombang suara di akhir maksimum.

Examples

Slider dengan tanda centang pada interval 10 titik dari 0 hingga 100.

Membuat penggeser

• API Penting: Kelas Slider, properti Nilai, peristiwa PerubahanNilai

Buka aplikasi Galeri WinUI 3 dan lihat tindakan Slider

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Berikut cara membuat slider di XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

Berikut cara membuat penggeser dengan kode.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Anda dapat mengatur nilai penggeser dari properti Nilai. Untuk menanggapi perubahan nilai, Anda dapat menggunakan pengikatan data untuk mengikat properti Nilai, atau menangani peristiwa ValueChanged .

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

Topik terkait

• Alihkan sakelar
• Kelas penggerak