Slider
コンポーザブルを使用すると、ユーザーは値の範囲から選択できます。スライダーを使用して、ユーザーが以下の操作を行えるようにできます。
- 音量や明るさなど、範囲内の値を使用する設定を調整します。
- 価格帯を設定するときのように、グラフ内のデータをフィルタします。
- ユーザー入力(レビューでの評価の設定など)。
スライダーには、トラック、つまみ、値のラベル、目盛りが含まれています。
- トラック: トラックは水平のバーで、 値を指定します。
- スライダーのつまみ: スライダー上のドラッグ可能なコントロール要素。トラックで定義された範囲内の特定の値を選択できます。
- 目盛り: 目盛りは、スライダーのトラックの上に表示される視覚的なマーカーまたはインジケーターです。

基本的な実装
API の完全な定義については、Slider
リファレンスをご覧ください。重要なポイント
Slider
コンポーザブルのパラメータは次のとおりです。
value
: スライダーの現在の値。onValueChange
: 値が設定されるたびに呼び出されるラムダ 変更されました。enabled
: ユーザーがスライダーを操作できるかどうかを示すブール値。
次の例は、わかりやすいスライダーです。これにより、ユーザーは 0.0
~1.0
の値を選択できます。ユーザーは任意の値を選択できるため、
その範囲の場合は、スライダーが「連続」になります。
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
これを実装すると次のようになります。

高度な実装
より複雑なスライダーを実装する場合は、 次のパラメータを使用します。
colors
: 以下を制御できるSliderColors
のインスタンス。 調整できます。valueRange
: スライダーが取ることができる値の範囲。steps
: つまみをスナップするスライダーのノッチの数。
次のスニペットでは、3 つのステップを含むスライダーを実装し、
0.0
~50.0
。つまみはステップごとにスナップするため、このスライダーは
離散。
@Preview @Composable fun SliderAdvancedExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it }, colors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.secondary, activeTrackColor = MaterialTheme.colorScheme.secondary, inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, ), steps = 3, valueRange = 0f..50f ) Text(text = sliderPosition.toString()) } }
実装は次のようになります。

範囲スライダー
専用の RangeSlider
コンポーザブルを使用することもできます。これにより、ユーザーは 2 つの値を選択できます。これは、ユーザーが最小価格と最大価格を選択する場合などに便利です。
次の例は、連続範囲スライダーの比較的簡単な例です。
@Preview @Composable fun RangeSliderExample() { var sliderPosition by remember { mutableStateOf(0f..100f) } Column { RangeSlider( value = sliderPosition, steps = 5, onValueChange = { range -> sliderPosition = range }, valueRange = 0f..100f, onValueChangeFinished = { // launch some business logic update with the state you hold // viewModel.updateSelectedSliderValue(sliderPosition) }, ) Text(text = sliderPosition.toString()) } }
