Seekbar example in jetpack

In Jetpack Compose, you can create a seek bar (slider) using the Slider composable. It’s highly customizable and can be used for selecting a value within a specific range.

Basic Example of a Slider

@Composable
fun SliderExample() {
    var sliderValue by remember { mutableStateOf(0f) }

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        Text(text = "Value: ${sliderValue.toInt()}")
        Spacer(modifier = Modifier.height(16.dp))
        Slider(
            value = sliderValue,
            onValueChange = { sliderValue = it },
            valueRange = 0f..100f
        )
    }
}

Explanation:

1. State Management:

• sliderValue holds the current value of the slider.
• onValueChange updates the slider’s state as the user moves it.

1. Range:

• The valueRange parameter defines the minimum and maximum values (e.g., 0f..100f).

Slider with Steps

You can divide the slider into steps using the steps parameter.

@Composable
fun SteppedSliderExample() {
    var sliderValue by remember { mutableStateOf(0f) }

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        Text(text = "Value: ${sliderValue.toInt()}")
        Spacer(modifier = Modifier.height(16.dp))
        Slider(
            value = sliderValue,
            onValueChange = { sliderValue = it },
            valueRange = 0f..10f,
            steps = 9 // 10 steps in total
        )
    }
}

Explanation:

• steps: Defines the number of discrete steps between the minimum and maximum values (excluding boundaries).

Slider with Custom Colors

You can customize the colors of the slider’s track and thumb using the colors parameter.

@Composable
fun CustomSliderExample() {
    var sliderValue by remember { mutableStateOf(50f) }

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        Text(text = "Value: ${sliderValue.toInt()}")
        Spacer(modifier = Modifier.height(16.dp))
        Slider(
            value = sliderValue,
            onValueChange = { sliderValue = it },
            valueRange = 0f..100f,
            colors = SliderDefaults.colors(
                thumbColor = Color.Red,
                activeTrackColor = Color.Green,
                inactiveTrackColor = Color.Gray,
                activeTickColor = Color.Blue,
                inactiveTickColor = Color.Yellow
            )
        )
    }
}

Slider with Continuous Updates and Final Value

You can separate the onValueChange (continuous updates) from onValueChangeFinished (final value selection).

@Composable
fun ContinuousSliderExample() {
    var sliderValue by remember { mutableStateOf(25f) }
    var finalValue by remember { mutableStateOf(25f) }

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        Text(text = "Current Value: ${sliderValue.toInt()}")
        Text(text = "Final Value: ${finalValue.toInt()}")
        Spacer(modifier = Modifier.height(16.dp))
        Slider(
            value = sliderValue,
            onValueChange = { sliderValue = it },
            onValueChangeFinished = { finalValue = sliderValue },
            valueRange = 0f..100f
        )
    }
}

Slider with Labels and Icons

You can enhance the slider’s UI by adding labels or icons.

@Composable
fun LabeledSliderExample() {
    var sliderValue by remember { mutableStateOf(0f) }

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        Text(text = "Volume: ${sliderValue.toInt()}")
        Spacer(modifier = Modifier.height(16.dp))
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxWidth()
        ) {
            Icon(imageVector = Icons.Default.VolumeDown, contentDescription = "Volume Down")
            Slider(
                value = sliderValue,
                onValueChange = { sliderValue = it },
                valueRange = 0f..100f,
                modifier = Modifier.weight(1f)
            )
            Icon(imageVector = Icons.Default.VolumeUp, contentDescription = "Volume Up")
        }
    }
}

How to Use:

Add any of the above composables (SliderExample, SteppedSliderExample, etc.) in your setContent block in MainActivity.

Let me know if you need further customization or integration examples!