DEV Community

myougaTheAxo
myougaTheAxo

Posted on

Slider完全ガイド — Slider/RangeSlider/ステップ/カスタムThumb

#android #kotlin #jetpackcompose #mobile

この記事で学べること

Slider（Slider、RangeSlider、ステップ指定、カスタムThumb）を解説します。

基本Slider 

@Composable
fun SliderExamples() {
    Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        // 基本
        var value by remember { mutableFloatStateOf(50f) }
        Text("値: ${value.toInt()}")
        Slider(
            value = value,
            onValueChange = { value = it },
            valueRange = 0f..100f
        )

        // ステップ付き
        var stepped by remember { mutableFloatStateOf(0f) }
        Text("ステップ: ${stepped.toInt()}")
        Slider(
            value = stepped,
            onValueChange = { stepped = it },
            valueRange = 0f..100f,
            steps = 9 // 10段階（0, 10, 20, ...100）
        )

        // 無効化
        Slider(value = 30f, onValueChange = {}, enabled = false)
    }
}
Enter fullscreen mode Exit fullscreen mode

RangeSlider 

@Composable
fun RangeSliderExample() {
    var range by remember { mutableStateOf(20f..80f) }

    Column(Modifier.padding(16.dp)) {
        Text("範囲: ${range.start.toInt()} ~ ${range.endInclusive.toInt()}")
        RangeSlider(
            value = range,
            onValueChange = { range = it },
            valueRange = 0f..100f,
            steps = 19
        )
    }
}

// 価格フィルター
@Composable
fun PriceFilter() {
    var priceRange by remember { mutableStateOf(1000f..50000f) }
    val fmt = NumberFormat.getCurrencyInstance(Locale.JAPAN)

    Column(Modifier.padding(16.dp)) {
        Text("価格帯", style = MaterialTheme.typography.titleMedium)
        Text("${fmt.format(priceRange.start.toInt())} ~ ${fmt.format(priceRange.endInclusive.toInt())}")
        RangeSlider(
            value = priceRange,
            onValueChange = { priceRange = it },
            valueRange = 0f..100000f
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

カスタムカラーSlider 

@Composable
fun CustomSlider() {
    var volume by remember { mutableFloatStateOf(0.7f) }

    Column(Modifier.padding(16.dp)) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Icon(Icons.Default.VolumeDown, null)
            Slider(
                value = volume,
                onValueChange = { volume = it },
                modifier = Modifier.weight(1f),
                colors = SliderDefaults.colors(
                    thumbColor = MaterialTheme.colorScheme.primary,
                    activeTrackColor = MaterialTheme.colorScheme.primary,
                    inactiveTrackColor = MaterialTheme.colorScheme.surfaceVariant
                )
            )
            Icon(Icons.Default.VolumeUp, null)
        }
        Text("${(volume * 100).toInt()}%", textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth())
    }
}
Enter fullscreen mode Exit fullscreen mode

まとめ

API 用途
Slider 単一値スライダー
RangeSlider 範囲スライダー
steps ステップ刻み
SliderDefaults.colors カラーカスタム
  • Sliderで数値入力の直感的UI
  • RangeSliderで価格帯等の範囲フィルター
  • stepsで離散値（10刻み等）の選択
  • SliderDefaults.colorsでテーマに合わせたカラー

8種類のAndroidアプリテンプレート（Material3 UI対応）を公開しています。

テンプレート一覧 → Gumroad

関連記事：

I publish 8 Android app templates on Gumroad.

Browse templates → Gumroad

Top comments (0)