Composable Slider
memungkinkan pengguna membuat pilihan dari berbagai
masing-masing. Anda dapat menggunakan penggeser untuk mengizinkan pengguna melakukan hal berikut:
- Sesuaikan setelan yang menggunakan rentang nilai, seperti volume, dan kecerahan.
- Memfilter data dalam grafik, seperti saat menetapkan rentang harga.
- Input pengguna, seperti menetapkan rating dalam ulasan.
Penggeser berisi trek, thumb, label nilai, dan tanda centang:
- Trek: Trek adalah bilah horizontal yang mewakili rentang nilai yang dapat diambil penggeser.
- Thumb: Thumbnail adalah elemen kontrol yang dapat ditarik di penggeser yang memungkinkan pengguna memilih nilai tertentu dalam rentang yang ditentukan oleh jalur.
- Tanda centang: Tanda centang adalah penanda atau indikator visual opsional yang muncul di sepanjang trek penggeser.
![Penggeser dengan jempol, jalur, dan tanda centang.](https://developer.android.com/static/develop/ui/compose/images/components/slider.png?authuser=6&hl=id)
Implementasi dasar
Lihat referensi Slider
untuk definisi API lengkap. Beberapa kunci
parameter untuk composable Slider
adalah sebagai berikut:
value
: Nilai penggeser saat ini.onValueChange
: Lambda yang dipanggil setiap kali nilainya ubah.enabled
: Nilai boolean yang menunjukkan apakah pengguna dapat berinteraksi dengannya atau tidak {i>slider<i}.
Contoh berikut adalah penggeser langsung. Hal itu memungkinkan pengguna untuk
pilih nilai dari 0.0
hingga 1.0
. Karena pengguna dapat
memilih nilai apa pun di
rentang tersebut, penggeser akan bersifat berkelanjutan.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
Implementasi ini muncul sebagai berikut:
![Komponen penggeser dengan nilai yang dipilih kira-kira tiga perempat di sepanjang trek.](https://developer.android.com/static/develop/ui/compose/images/components/slider-basic.png?authuser=6&hl=id)
Penerapan lanjutan
Saat menerapkan penggeser yang lebih kompleks, Anda juga dapat menggunakan parameter berikut.
colors
: InstanceSliderColors
yang memungkinkan Anda mengontrol warna dari penggeser.valueRange
: Rentang nilai yang dapat diambil penggeser.steps
: Jumlah lubang pada penggeser yang dipaskan ibu jari.
Cuplikan berikut menerapkan penggeser yang memiliki tiga langkah, dengan rentang
dari 0.0
hingga 50.0
. Karena ibu jari dipaskan ke setiap langkah, {i>slider<i} ini
diskrit.
@Preview @Composable fun SliderAdvancedExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it }, colors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.secondary, activeTrackColor = MaterialTheme.colorScheme.secondary, inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, ), steps = 3, valueRange = 0f..50f ) Text(text = sliderPosition.toString()) } }
Implementasinya muncul sebagai berikut:
![Tulis {i>alt text<i} Anda di sini](/static/develop/ui/compose/images/components/slider-advanced.png)
Penggeser rentang
Anda juga dapat menggunakan composable RangeSlider
khusus. Hal ini memungkinkan pengguna untuk
memilih dua nilai. Hal ini dapat berguna dalam kasus seperti ketika pengguna ingin
memilih harga minimum dan maksimum.
Contoh berikut adalah contoh yang relatif sederhana dari penggeser rentang.
@Preview @Composable fun RangeSliderExample() { var sliderPosition by remember { mutableStateOf(0f..100f) } Column { RangeSlider( value = sliderPosition, steps = 5, onValueChange = { range -> sliderPosition = range }, valueRange = 0f..100f, onValueChangeFinished = { // launch some business logic update with the state you hold // viewModel.updateSelectedSliderValue(sliderPosition) }, ) Text(text = sliderPosition.toString()) } }
![Komponen penggeser rentang dengan dua nilai yang dipilih. Label menampilkan batas atas dan bawah pilihan.](https://developer.android.com/static/develop/ui/compose/images/components/slider-range.png?authuser=6&hl=id)