@Preview_mdpi
@Composable
fun SliderBasic() {
    Row(
        modifier = Modifier.size(320.dp, 120.dp).padding(20.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        var _value by remember { mutableFloatStateOf(0.5f) }
        Text(text = "Value [ %5.2f ]".format(_value))
        Slider(
            value = _value,
            onValueChange = { _value = it }
        )
    }
}

@Composable
fun Slider( ... ) {
    require(steps >= 0) { "steps should be >= 0" }

    SliderImpl(
        ... ,
        thumb = {
            SliderDefaults.Thumb(
                interactionSource = interactionSource,
                colors = colors,
                enabled = enabled
            )
        },
        track = { sliderPositions ->
            SliderDefaults.Track(
                colors = colors,
                enabled = enabled,
                sliderPositions = sliderPositions
            )
        }
    )
}

@Composable
private fun SliderImpl(
    ... 
    thumb: @Composable (SliderPositions) -> Unit,
    track: @Composable (SliderPositions) -> Unit
) {
    ...
    Layout(
        {
            Box(modifier = Modifier.layoutId(SliderComponents.THUMB)) { thumb(sliderPositions) }
            Box(modifier = Modifier.layoutId(SliderComponents.TRACK)) { track(sliderPositions) }
        },
        ...
    ) { measurables, constraints ->
        ...
        layout(
            sliderWidth,
            sliderHeight
        ) {
            trackPlaceable.placeRelative(	// 先に来るものが下、Track：バー
                trackOffsetX,
                trackOffsetY
            )
            thumbPlaceable.placeRelative(	// 後に来るものが上、Thumb：つまみ
                thumbOffsetX,
                thumbOffsetY
            )
        }
    }
}

@Preview_mdpi
@Composable
fun StepsSample() {
    Row(
        modifier = Modifier
            .size(320.dp, 120.dp)
            .padding(20.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        var _value by remember { mutableFloatStateOf(0.4f) }
        Text(text = "Value [ %5.2f ]".format(_value))
        Slider(
            value = _value,
            onValueChange = { _value = it },
            steps = 4
        )
    }
}

@Preview_mdpi
@Composable
fun ColorsSample() {
    Row(
        modifier = Modifier
            .size(320.dp, 120.dp)
            .padding(20.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        var _value by remember { mutableFloatStateOf(0.4f) }
        Text(text = "Value [ %2.1f ]".format(_value))
        Slider(
            value = _value,
            onValueChange = { _value = it },
            steps = 4,
            colors = SliderDefaults.colors(
                thumbColor = Color(0xffff0000),			// つまみの色
                activeTrackColor = Color(0xffffb0b0),	// バーの色
                activeTickColor = Color(0xff000000),	// ノッチの色
                inactiveTrackColor = Color(0xffe0e0e0),
                inactiveTickColor = Color(0xff808080)
            )
        )
    }
}

@Composable
fun HeartThumb(
    sliderPositions: SliderPositions,   //　未使用
    modifier: Modifier = Modifier,
    colors: HeartSliderColors = HeartSliderColors.create(),
    enabled: Boolean = true,
    thumbSize: DpSize = DpSize(24.dp, 24.dp)
) {
    val _color = if(enabled) colors.thumbColor else colors.disableThumbColor
    Image(		// ハートアイコン：baseline_favorite_black_24
        painter = painterResource(R.drawable.baseline_favorite_black_24),
        contentDescription = null,
        modifier = modifier.size(thumbSize),
        colorFilter = ColorFilter.tint(_color, BlendMode.SrcIn)
    )
}

@Composable
fun HeartTrack(
    sliderPositions: SliderPositions,
    modifier: Modifier = Modifier,
    colors: HeartSliderColors = HeartSliderColors.create(),
    enabled: Boolean = true,
) {
    val inactiveTrackColor = colors.trackColor(enabled, active = false)
    val activeTrackColor = colors.trackColor(enabled, active = true)
    val inactiveTickColor = colors.tickColor(enabled, active = false)
    val activeTickColor = colors.tickColor(enabled, active = true)
    Canvas(
        modifier
            .fillMaxWidth()
            .height(10.dp)
//            .graphicsLayer(alpha = 0.99f)
            .graphicsLayer(
                compositingStrategy = CompositingStrategy.Offscreen
            )
    ) {
        val _width = size.width
        val _height = size.height
        
        // スライドバー（Inactive）
        val _inactivePath = Path().apply {
            moveTo(0.0f, _height)
            lineTo(_width, 0.0f)
            lineTo(_width, _height)
            lineTo(0.0f, _height)
        }
        drawPath(path = _inactivePath, color = inactiveTrackColor.value)

        // スライドバー（Active）
        val _activePosition = _width * sliderPositions.activeRange.endInclusive
        val _activeSize = Size(_activePosition, _height)
        drawRect(color = activeTrackColor.value, size = _activeSize, blendMode = BlendMode.SrcIn)

        // 目盛り
        sliderPositions.tickFractions.groupBy {
            it > sliderPositions.activeRange.endInclusive
        }.forEach { (key, list) ->
            list.forEach {
                val _color = if(key) inactiveTickColor.value
                else activeTickColor.value
                drawLine(
                    color = _color,
                    start = Offset(_width * it, 0.0f),
                    end = Offset(_width * it, _height),
                    blendMode = BlendMode.SrcIn
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Preview_mdpi
@Composable
fun ThumbTrackSample() {
    Row(
        modifier = Modifier
            .size(320.dp, 120.dp)
            .padding(20.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        var _value by remember { mutableFloatStateOf(0.5f) }
        Text(text = "Value [ %5.2f ]".format(_value))
        Slider(		// タイプ2
            value = _value,
            onValueChange = { _value = it },
            steps = 5,
            thumb = { sliderPositions ->
                HeartThumb(sliderPositions = sliderPositions) },
            track = { sliderPositions ->
                HeartTrack(sliderPositions = sliderPositions) }
            }
        )
    }
}

fun RangeSlider(
    value: ClosedFloatingPointRange<Float>,
    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    /*@IntRange(from = 0)*/
    steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors()
) { ... }

@Preview_mdpi
@Composable
fun RangeSliderBasic() {
    Column(modifier = Modifier.size(320.dp, 120.dp).padding(20.dp)) {
        var _range by remember { mutableStateOf(0.2f..0.8f) }
        val _start = _range.start
        val _end = _range.endInclusive
        Text(text = "Range [ %5.2f～%5.2f ]".format(_start, _end))
        RangeSlider(
            value = _range,
            onValueChange = { range -> _range = range }
        )
    }
}