Quick question I have a slider to adjust the hue ...

# compose

[zt]

Quick question
I have a slider to adjust the hue of a color. is it normal behavior for it to be recomposing or skipping for each value? For every increment it triggers a skip and sometimes recomposition. What should be happening here? Code in 🧵

[zt]

private fun Slider(
    value: Float,
   onValueChange: (Float) -> Unit,
    valueRange: ClosedFloatingPointRange<Float>,
   brush: Brush
) {
    Slider(
      value = value,
      onValueChange = onValueChange,
      thumb = {
            Box(
              modifier = Modifier
                    .size(24.dp)
                   .background(Color.White, CircleShape)
          )
        },
       track = {
           Canvas(
                modifier = Modifier
                   .widthIn(max = 900.dp)
                  .height(12.dp)
                  .fillMaxWidth()
            ) {
                drawLine(
                   brush = brush,
                    start = Offset(0f, size.center.y),
                    end = Offset(size.width, size.center.y),
                    strokeWidth = size.height.dp.toPx(),
                  cap = StrokeCap.Round
                )
         }
       },
       valueRange = valueRange
   )
}

val hue by remember(color) {
                                derivedStateOf {
                                    color.hue
                                }
                            }
                            Slider(
                                value = hue,
                                onValueChange = {
                                    color = Color.hsv(it, color.saturation, color.hsvValue)
                                },
                                valueRange = 0f..359f,
                                brush = Brush.horizontalGradient(
                                    listOf(
                                        Color.Red,
                                        Color.Yellow,
                                        Color.Green,
                                        Color.Cyan,
                                        Color.Blue,
                                        Color.Magenta,
                                        Color.Red
                                    )
                                )
                            )

sorry about the awful formatting, I wish slack had a better way to import code without the indent

[romainguy]

your derivedStateOf isn’t terribly useful since it will change almost (if not always) every time color changes. And computing the hue isn’t expensive. You should just use color.hue directly like you do for saturation and value