Material 3のSliderの見た目をMaterial 2時代の見た目にする

Material 3 の Slider を使うと Material 2 から全く異なる見た目になります。

Material 3	Material 2

Material 3 の Slider を使いつつ見た目を Material 2 ぽくする実装の紹介です。

基本的には Material 3 の Slider を使う方がコントラストであったり、ハンドルのタッチターゲットサイズであったりメリットの方が多いです。
どうしてもという時でない限りは Material 3 の Slider を使いましょう。

実装

Track の高さを調整しつつ、Thumb の見た目を変更します。

var sliderPosition by rememberSaveable { mutableFloatStateOf(0f) }

val interactionSource = remember { MutableInteractionSource() }
val trackHeight = 4.dp
val thumbSize = DpSize(20.dp, 20.dp)
Slider(
    interactionSource = interactionSource,
    modifier = Modifier.requiredSizeIn(minWidth = thumbSize.width, minHeight = trackHeight),
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
    thumb = {
        SliderDefaults.Thumb(
            interactionSource = interactionSource,
            modifier = Modifier
                .size(thumbSize)
                .shadow(1.dp, CircleShape, clip = false)
                .indication(
                    interactionSource = interactionSource,
                    indication = ripple(bounded = false, radius = 20.dp)
                )
        )
    },
    track = {
        SliderDefaults.Track(
            sliderState = it,
            modifier = Modifier.height(trackHeight),
            thumbTrackGapSize = 0.dp,
            trackInsideCornerSize = 0.dp,
            drawStopIndicator = null
        )
    }
)

ref: https://cs.android.com/androidx/platform/tools/dokka-devsite-plugin/+/master:testData/compose/samples/material3/samples/SliderSamples.kt;l=76