Jetpack Compose - Slider

Penting
Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE
Pengertian
Slider pada Jetpack Compose adalah komponen UI yang digunakan untuk memungkinkan pengguna untuk memilih nilai dalam rentang tertentu dengan menggeser tombol penggeser (thumb) ke kiri atau kanan.
Kapan Harus Menggunakan Slider?
Slider biasanya digunakan dalam beberapa situasi:
-
Rentang Nilai: Ketika pengguna perlu memilih nilai dari rentang tertentu, misalnya volume suara, kecerahan layar, atau pengaturan numerik lainnya.
-
Aksesibilitas: Slider dapat mempermudah pengguna untuk memilih nilai dengan cara yang lebih visual dan intuitif dibandingkan dengan memasukkan nilai secara langsung.
-
Interaksi Langsung: Cocok digunakan di aplikasi yang memerlukan interaksi langsung dengan pengguna, seperti aplikasi multimedia atau pengaturan aplikasi.
Karakteristik Slider
-
Value: Nilai saat ini yang dipilih oleh slider.
-
onValueChange: Fungsi yang dipanggil ketika nilai slider berubah.
-
Value Range: Rentang nilai yang dapat diterima oleh slider.
-
Steps: Jumlah langkah atau nilai diskrit yang dapat dipilih oleh slider.
-
Colors: Konfigurasi warna untuk slider seperti warna track dan thumb.
-
Interaction Source: Sumber interaksi yang melacak interaksi pengguna dengan slider.
Parameter/Atribut
@Composable
fun Slider(
value: Float,
onValueChange: (Float) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
/*@IntRange(from = 0)*/
steps: Int = 0,
onValueChangeFinished: (() -> Unit)? = null,
colors: SliderColors = SliderDefaults.colors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)
Parameter pada Slider di Jetpack Compose
Berikut adalah penjelasan parameter-parameter yang ada di komponen Slider pada Jetpack Compose:
-
value:
Float
- Nilai saat ini dari slider.
-
onValueChange:
(Float) -> Unit
- Fungsi yang dipanggil ketika nilai slider berubah.
-
modifier:
Modifier
- Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari slider.
-
enabled:
Boolean
- Menentukan apakah slider diaktifkan atau tidak. Defaultnya adalah
true
.
- Menentukan apakah slider diaktifkan atau tidak. Defaultnya adalah
-
valueRange:
ClosedFloatingPointRange<Float>
- Rentang nilai yang dapat diterima oleh slider. Defaultnya adalah
0f..1f
.
- Rentang nilai yang dapat diterima oleh slider. Defaultnya adalah
-
steps:
Int
- Jumlah langkah atau nilai diskrit yang dapat dipilih oleh slider. Jika
0
, slider akan bergerak secara kontinu. (Optional)
- Jumlah langkah atau nilai diskrit yang dapat dipilih oleh slider. Jika
-
onValueChangeFinished:
(() -> Unit)?
- Fungsi yang dipanggil ketika pengguna selesai mengubah nilai slider. (Optional)
-
colors:
SliderColors
- Konfigurasi warna untuk slider. Defaultnya adalah
SliderDefaults.colors()
.
- Konfigurasi warna untuk slider. Defaultnya adalah
-
interactionSource:
MutableInteractionSource
- Sumber interaksi yang digunakan untuk melacak interaksi pengguna dengan slider. Defaultnya adalah
remember { MutableInteractionSource() }
.
- Sumber interaksi yang digunakan untuk melacak interaksi pengguna dengan slider. Defaultnya adalah
Contoh
@Composable
fun DemoSlider(modifier: Modifier = Modifier) {
val value = remember {
mutableStateOf(0f)
}
Slider(value = value.value, onValueChange = {
value.value = it
})
}
✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i