androidslidermaterial-designmaterial-componentsandroid-slider

Two thumbs with the slider of Material component for android?


on the sliders presentation of the Material.io website they show the double thumbs slider below, but I can't find how to enable it, and I didnt really find any docs. Is it available for the android component?

enter image description here


Solution

  • You can use the Material Components Library.
    Add the RangeSlider component in your layout. Something like:

        <com.google.android.material.slider.RangeSlider
            android:id="@+id/slider_multiple_thumbs"            
            android:valueFrom="0"
            android:valueTo="10"
            ../>
    

    Then use the method setValues():

    RangeSlider slider = findViewById(R.id.slider_multiple_thumbs);
    slider.setValues(1.0f,5.0f);
    

    The final result:

    enter image description here

    Note: This requires a minimum of version 1.2.0-beta01

    Pls note that:


    With Compose you can use the RangeSlider:

        var sliderPosition by remember { mutableStateOf(0f..100f) }
    
        RangeSlider(
            modifier = Modifier.semantics { contentDescription = "Localized Description" },
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
        )
    

    enter image description here