Bagaimana Bekerja dengan Slider di slider CSS3 - dummies

Slider memberi pengguna kemampuan untuk memasukkan nilai secara visual - sebagai bagian dari keseluruhan. Di CSS3, slider memastikan pengguna memasukkan nilai yang benar dalam rentang nilai, jadi Anda tidak perlu khawatir dengan masalah keamanan atau nilai yang salah. Akibatnya, slider memberikan cara yang berharga untuk memberi masukan variabel.

Contoh berikut menunjukkan bagaimana menggunakan slider di aplikasi Anda. Ini dimulai dengan HTML yang digunakan untuk menentukan lokasi dan tampilan dasar slider. (Anda dapat menemukan kode lengkap untuk contoh ini di folder Bab 06Widgets dari kode yang dapat didownload sebagai Slider. HTML.)

Menggunakan Slider Widget
0 50 Nilai:

Slider memiliki nilai minimum 0 dan nilai maksimal 50. Slider ini juga menggunakan CSS berikut untuk memberikan output sebuah penampilan lebih menyenangkan dan memungkinkan untuk menandai awal dan akhir dari skala.

#Slider {width: 50%; margin: 30px;} #Left {position: absolute; atas: 15px; kiri: -5px;} #Right {position: absolute; atas: 15px; kiri: 99%;}

Seperti yang Anda lihat, CSS menempatkan awal dan akhir skala pada posisi tertentu sehingga sesuai dengan ukuran slider. Sejauh yang diketahui pengguna, skala dan slider adalah satu bagian, namun sebenarnya ada dua bagian dalam kode. Sisa potongan kode adalah script yang ditampilkan di sini.

In Kasus ini, kode menetapkan nilai slider maksimum menjadi 50. Nilai minimum default ke 0. Namun, Anda dapat mengatur nilai maksimum dan minimum ke posisi manapun. Meski contohnya tidak menunjukkannya, Slider bisa memiliki lebih dari satu pegangan, sehingga bisa mewakili rentang. Fleksibilitas ini berarti Anda dapat meminta pengguna untuk memasukkan titik awal dan titik henti.

Salah satu peristiwa yang paling sering digunakan adalah perubahan. Contoh menampilkan nilai baru setiap kali pengguna selesai memindahkan pegangannya. Namun, cara Anda menggunakan output tergantung pada aplikasi Anda. Umumnya, Anda menggunakan output untuk memberikan input data atau kontrol aplikasi. Namun, ada baiknya menampilkan nilai slider sebenarnya sehingga pengguna mengetahui nilai masukan sebenarnya.