Skip to main content

JetpackComposeでSliderを使う

JetpackComposeでSliderを使いたい!
そんなことでやり方


・コードと説明
value:初期値
onValueChange:スクロールしたときにコールバックされる
valueRange:最大値と最小値
steps:スライダーが止まる場所を何個作るか
colors:色
colors.steps:つまみの色
colors.activeTrackColor:つまみの左側の線の色
colors.disabledActiveTickColor:つまみの右側の線の色
colors.activeTickColor:stepsを設定した場合の止まる場所でつまみの左側
colors.inactiveTickColor:stepsを設定した場合の止まる場所でつまみの右側

Slider(
    value = 7f,
    onValueChange = {},
    valueRange = 0f..10f,
    steps = 10,
    colors = SliderDefaults.colors(
        thumbColor = Color.Red,
        activeTrackColor = Color.Blue,
        disabledActiveTickColor = Color.Green,
        activeTickColor = Color.Transparent,
        inactiveTickColor = Color.Transparent
    )
)

 

・既存と同じにするには
既存のSliderと似せて作るなら
activeTickColorとinactiveTickColorをTransparentにする
これで結構似せて作れると思う

 

関連記事:

Pocket