SxSlider (滑块)
通过拖动滑块在连续或间断范围内选择数值。对齐 Microsoft Fluent UI Blazor Slider (v4.13.2) 的 API 结构,并说明 NextUI 当前实现状态。
使用场景
- 音量/亮度等连续值调节
- 配置项数值范围选择
- 表单中的范围输入
约束说明
Min/Max/Step 需要满足合理范围关系。
Orientation 为 Vertical 时建议设置容器高度。
行为说明
Value 改变时触发 ValueChanged。
Disabled/ReadOnly 时不响应输入。
API
Parameters (参数)
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
Value |
TValue? |
default |
当前数值。 |
| Implemented |
Min |
TValue? |
null |
最小值。 |
| Implemented |
Max |
TValue? |
null |
最大值。 |
| Implemented |
Step |
TValue? |
null |
步长。 |
| Implemented |
Orientation |
Orientation |
Horizontal |
方向。 |
| Implemented |
ReadOnly |
bool |
false |
是否只读。 |
| Implemented |
Required |
bool |
false |
是否必填。 |
| Implemented |
Autofocus |
bool |
false |
自动聚焦。 |
| Implemented |
AriaLabel |
string? |
null |
aria-label。 |
| Implemented |
AccessKey (继承) |
string? |
null |
快捷键。 |
| Implemented |
TabIndex (继承) |
int? |
null |
Tab 顺序。 |
| Implemented |
Disabled (继承) |
bool |
false |
禁用状态。 |
| Implemented |
Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented |
Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented |
Style (继承) |
string? |
null |
自定义样式。 |
| Implemented |
Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented |
AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
Events (事件)
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
ValueChanged |
EventCallback<TValue?> |
数值改变时触发。 |
示例
<SxSlider TValue="double" @bind-Value="_value" Min="0" Max="100" Step="1" />
<SxSlider TValue="double" @bind-Value="_value" Orientation="Orientation.Vertical" />
参考设计 (References)