How to implement Slider with Jetpack compose? | How to use Slider?

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

• Continuous slider : Use continuous sliders to allow users to make meaningful selections that don’t require a specific value
• Discrete slider : User can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:

package jetpackcompose.boltuix.com

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import jetpackcompose.boltuix.com.ui.theme.JetpackComposeTheme
import kotlin.math.roundToInt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CodeSnippets()
                }
            }
        }
    }
}

@Composable
fun CodeSnippets() {
    var sliderPosition by remember { mutableStateOf(0f)}
    val intPosition = (sliderPosition*10).roundToInt()

    Column(
        Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {


        // EG1
        // Slider limit 1-10
        Text(
            "Continuous slider : $intPosition",
            fontWeight = FontWeight.Bold,
            fontSize = 25.sp
        )


        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )

        //............................................................................

       // EG2
       //You can allow the user to choose only between predefined set of values by specifying the amount of steps between min and max values:
        var sliderPosition2 by remember { mutableStateOf(0f) }
        val intPosition2 = sliderPosition2.roundToInt()

        Text(
            "Discrete slider : $intPosition2",
            fontWeight = FontWeight.Bold,
            fontSize = 25.sp
        )
        Slider(
            value = sliderPosition2,
            onValueChange = { sliderPosition2 = it }, 
            valueRange = 0f..10f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
            steps = 10,
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colorScheme.secondary,
                activeTrackColor = MaterialTheme.colorScheme.secondary
            )
        )

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackComposeTheme {
        CodeSnippets()
    }
}

..