SusSlider

单滑块数值滑动条 —— min / max / step，可选刻度与标签。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Value	Prop<float>	0f	v-model
Min	Prop<float>	0f	v-model
Max	Prop<float>	100f	v-model
Step	Prop<float>	1f	v-model
Color	Prop<string>	"primary"	v-model
Disabled	Prop<bool>	false	v-model
Readonly	Prop<bool>	false	v-model
ShowLabel	Prop<bool>	false	v-model
ShowTicks	Prop<bool>	false	v-model
TickLabels	Prop<string>	""	v-model
ThumbLabel	Prop<string>	"hidden"	v-model
Error	Prop<string>	""	v-model

插槽

没有插槽。

事件

名称	字段	载荷
ValueChanged	OnValueChanged	float
DragStart	OnDragStart	—
DragEnd	OnDragEnd	—

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• keyboard-focus
• sus-slider
• sus-slider__fill
• sus-slider__thumb
• sus-slider__thumb-dot
• sus-slider__thumb-label
• sus-slider__thumb-ripple
• sus-slider__thumb-ripple--active
• sus-slider__thumb-tooltip
• sus-slider__thumb-tooltip-arrow
• sus-slider__tick
• sus-slider__tick-label
• sus-slider__ticks
• sus-slider__track
• sus-slider--danger
• sus-slider--disabled
• sus-slider--dragging
• sus-slider--error
• sus-slider--has-thumb-label
• sus-slider--primary
• sus-slider--readonly
• sus-slider--secondary
• sus-slider--success
• sus-slider--warning

用法

<template>
  <sus:SusSlider :Value="Volume.Value"
                 Min="0"
                 Max="100"
                 Step="1"
                 Color="primary"
                 ShowLabel="true"
                 @value-changed="OnVolume" />
</template>

<script>
public Prop<float> Volume = new(70f);
void OnVolume(float value) { /* … */ }
</script>

var slider = new SusSlider();
slider.Min.Value = 0f;
slider.Max.Value = 1f;
slider.Step.Value = 0.01f;
slider.Value.Value = 0.5f;
slider.ThumbLabel.Value = "always";
slider.OnValueChanged += value => { /* … */ };

备注

• ThumbLabel：hidden · hover · always。
• 开启 ShowTicks 时，TickLabels 是一个以逗号分隔的列表。