Tutorial Yayasan slider Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
Fillet dan menonaktifkan slider,slider vertikal,nilai slider,
Yayasan slider
Yayasan slider memungkinkan pengguna untuk memilih rentang nilai dengan menyeret:
Slider dengan menggunakan <div class="range-slider" data-slider> " Data-slider> Buat. Dalam <div> dalam, menambahkan dua <span> elemen: <span class="range-slider-handle"> Buat slider persegi panjang (latar belakang biru), <span class="range-slider-active-segment"> di bar slider abu-abu setelah daerah slider.
Catatan: slider membutuhkan JavaScript. Jadi, Anda perlu menginisialisasi oundation JS:
contoh
<Class Div = "berbagai-slider " Data-slider>
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
Fillet dan menonaktifkan slider
Gunakan .radius dan .round kelas untuk menambahkan sudut dibulatkan slider. Gunakan .disabled kelas untuk menonaktifkan slider:
contoh
<Div class = "berbagai-slider " Data-slider> id </ div>
<Class Div = "berbagai-slider radius" Data-slider> id. </ div>
<Class Div = "berbagai-slider putaran" Data-slider> id. </ div>
<Class Div = "berbagai-slider dinonaktifkan" Data-slider> id. </ div>
Coba »
slider vertikal
Gunakan .vertical-range kelas dan data-options="vertical: true;" ;" untuk membuat slider vertikal:
contoh
<Class Div = "berbagai-slider vertikal-range" Data-slider Data-opsi = "vertical: true;">
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
Coba »
nilai slider
Secara default, slider bar di tengah-tengah (nilai "50"). Anda dapat menambahkan data-options="initial: num " " untuk mengubah nilai default dari properti:
contoh
<Class Div = "berbagai-slider " Data-slider Data-opsi = "awal: 80;">
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
Coba » nilai slider layar
Jika kita perlu untuk menyeret nilai slider ketika layar real-time, dapat diperoleh dengan <div> Tambahkan data-options="display_selector:# id " id cocok dengan atribut id dan nilai dari elemen slider, sebagai contoh:
contoh
<! - Tampilan nilai slider di rentang ini ->
<Span id = "mySlider"> </ span>
<Class Div = "berbagai-slider " Data-slider Data-opsi = "display_selector: #mySlider;">
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
Coba » Kombinasi opsi data
Contoh berikut ini menggunakan display_selector dan initial opsi data:
contoh
<Span id = "mySlider"> </ span>
<Class Div = "berbagai-slider " Data-slider Data-opsi = "display_selector: #mySlider; awal: 20;">
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
Coba » Langkah? Panjang
Secara default, slider tersebut akan dipindahkan untuk mengurangi peningkatan jumlah "1." Anda dapat menambahkan data-options="step: num ;" ;" atribut untuk mengubah nilai langkah ?. Misalnya diatur ke 25:
contoh
<Span id = "mySlider"> </ span>
<Class Div = "berbagai-slider " Data-slider Data-opsi = "display_selector: #mySlider; langkah: 25;">
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
Coba » Interval kustom
Secara default, nilai dalam kisaran "0" untuk "100." Anda dapat menambahkan-Options data start dan end untuk menetapkan nilai interval. Contoh berikut menetapkan nilai interval "1" untuk "20":
contoh
<Span id = "mySlider"> </ span>
<Class Div = "berbagai-slider " Data-slider Data-opsi = "display_selector: #mySlider; mulai: 1; end: 20;">
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
Coba » Menggunakan grid
Gunakan berikut untuk menggunakan slider di grid:
contoh
<Class Div = "row">
<Div class = "kecil-10 kolom">
<Class Div = "berbagai-slider " Data-slider Data-opsi = "display_selector: #mySlider;">
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
</ Div>
<Div class = "kecil-2 kolom">
<! - Unsur display (Tip : gunakan CSS untuk sempurna posisi itu) ->
<Span id = "mySlider" gaya = "display: block; margin-top: 14px;"> </ span>
</ Div>
</ Div>
Coba » menggunakan input
Contoh berikut menggunakan <input> menggantikan <span> untuk menampilkan nilai slider:
contoh
<Class Div = "row">
<Div class = "kecil-10 kolom">
<Class Div = "berbagai-slider " Data-slider Data-opsi = "display_selector: #mySlider; awal: 72;">
<Span class = "berbagai-slider -handle"> </ span>
<Span class = "berbagai-slider -active-segmen"> </ span>
</ Div>
</ Div>
<Div class = "kecil-2 kolom">
<! - Unsur display (Tip : gunakan CSS untuk sempurna posisi itu) ->
<Jenis Masukan = "angka" id = "mySlider" style = "margin-top: 7px;" value = "72">
</ Div>
</ Div>
Coba »