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.

• valueRange: ClosedFloatingPointRange<Float>

  • Rentang nilai yang dapat diterima oleh slider. Defaultnya adalah 0f..1f.

• steps: Int

  • Jumlah langkah atau nilai diskrit yang dapat dipilih oleh slider. Jika 0, slider akan bergerak secara kontinu. (Optional)

• onValueChangeFinished: (() -> Unit)?

  • Fungsi yang dipanggil ketika pengguna selesai mengubah nilai slider. (Optional)

• colors: SliderColors

  • Konfigurasi warna untuk slider. Defaultnya adalah SliderDefaults.colors().

• interactionSource: MutableInteractionSource

  • Sumber interaksi yang digunakan untuk melacak interaksi pengguna dengan slider. Defaultnya adalah remember { MutableInteractionSource() }.

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

Video