M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Slider：Centered、Vertical 与轨道图标1.5.0-alpha25
从标准 Slider 扩展到居中范围、垂直方向和自定义 Track/Thumb，并理解 state 重载。
最后更新 2026-08-01
Expressive 示例新增了什么
catalog 标记了四类：带轨道图标、CenteredSlider、VerticalSlider、VerticalCenteredSlider。它们并不是给标准 Slider 加一层旋转。
- Centered track 从中心向正负方向表达值。
- VerticalSlider 使用专门的垂直交互与布局。
- Track/Thumb 重载允许基于
SliderState读取当前位置和范围。
var value by remember { mutableFloatStateOf(0f) }
VerticalSlider(
value = value,
onValueChange = { value = it },
valueRange = 0f..100f,
)自定义 Thumb 的版本陷阱
源码中旧 Thumb 重载已 deprecated；新的实验重载接收更新后的参数。不要从旧文章复制后再强行消除警告，应以当前 SliderDefaults.Thumb public API 为准。
状态原则
连续值保存 Float；离散档位通过 steps 约束。onValueChangeFinished 用于拖动结束后的提交，不应替代实时 onValueChange 更新 UI。
复制即用
垂直居中滑块：
import androidx.compose.material3.VerticalSlider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
@Composable
fun VolumeSlider() {
var value by remember { mutableFloatStateOf(50f) }
VerticalSlider(
value = value,
onValueChange = { value = it },
valueRange = 0f..100f,
)
}需要离散档位时加 steps；拖动结束提交用 onValueChangeFinished，实时 UI 更新仍走 onValueChange。