Latest web development tutorials

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> .. </ div>
<Class Div = "berbagai-slider radius" Data-slider> ... </ div>
<Class Div = "berbagai-slider putaran" Data-slider> ... </ div>
<Class Div = "berbagai-slider dinonaktifkan" Data-slider> ... </ 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 »