logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

Slider滑动输入条

滑动型输入器,展示当前值和可选范围。

何时使用

  • 当用户需要在数值区间/自定义区间内进行选择时,可为连续或离散值。

Examples

基本滑动条。当 rangetrue 时,渲染为双滑块。当 disabledtrue 时,滑块处于不可用状态。

expand code expand code

滑块左右可以设置图标来表达业务含义。

expand code expand code

当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。在 onmouseup 时,会触发 onAfterChange 事件,并把当前值作为参数传入。

expand code expand code

设置 reverse 可以将滑动条置反。

expand code expand code

tooltipVisible 为 true 时,将始终显示 ToolTip;反之则始终不显示,即使在拖动、移入时也是如此。

expand code expand code

和 数字输入框 组件保持同步.

expand code expand code

使用 tipFormatter 可以格式化 Tooltip 的内容,设置 tipFormatter=null,则隐藏 Tooltip。

expand code expand code

使用 marks 属性标注分段式滑块,使用 value / defaultValue 指定滑块位置。当 included=false 时,表明不同标记间为并列关系。当 step=null 时,Slider 的可选值仅有 marks 标出来的部分。

expand code expand code

垂直方向的 Slider。

expand code expand code

Slider API#

属性 描述 类型 默认值
DefaultValue 属性滑块的默认值。当AntDesign.Slider`1.Range为false时,使用number,否则使用[number, number] TValue --
Disabled 属性如果为真,滑块将不可交互 Boolean --
Dots 属性目前没有实施。拇指是否只能拖过刻度 Boolean --
Included 属性AntDesign.Slider`1.Marks不为null时生效,true表示包容,false表示协调 Boolean true
Marks 属性Slider 的刻度线 SliderMark[] --
Max 属性滑块可以滑动到的最大值 Double 100
Min 属性滑块可以滑动到的最小值 Double 0
Range 滑块是否为范围滑块。由 TValue 类型决定 Boolean --
Reverse 属性数字的顺序和方向以及最小值/最大值。

为true时,Max在左,Min在右

当为false时,Min在左,Max在右

Boolean false
Step 属性滑块可以遍历值的粒度。必须大于 0,并除以 (AntDesign.Slider`1.Max - AntDesign.Slider`1.Min)。当AntDesign.Slider`1.Marks不为null时,AntDesign.Slider`1.Step可以为null。 Double? --
Vertical 属性如果为真,滑块将是垂直的。如果为假,它将是水平的。 Boolean false
OnAfterChange 属性触发 onmouseup 时执行的回调。 EventCallback<TValue> --
OnChange 属性当用户更改滑块的值时执行的回调。 EventCallback<TValue> --
HasTooltip 属性标记是否应该有工具提示 Boolean true
TipFormatter 属性获取工具提示显示值的方法。将传递滑块值并获取用于显示的字符串 Func<Double, String> (value) => value.ToString()
TooltipPlacement 属性设置工具提示显示位置。有关详细信息,请参阅Tooltip Placement Right for vertical. Top for horizontal
TooltipVisible 属性如果 true 工具提示将始终显示 Boolean --
GetTooltipPopupContainer 属性目前未实施。 Tooltip 的 DOM 容器 Object --
Value 属性获取或设置输入的值。这应该与双向绑定一起使用。 TValue --
ValidationMessages FormItem 的验证消息 String[] --
AdditionalAttributes 属性获取或设置将应用于所创建元素的附加属性的集合。 IReadOnlyDictionary<String, Object> --
ValueChanged 属性更新绑定值的回调。 EventCallback<TValue> --
ValueExpression 属性标识绑定值的表达式。 Expression<Func<TValue>> --
ValuesExpression 属性标识可枚举绑定值的表达式。 Expression<Func<IEnumerable<TValue>>> --
Size 属性输入框的大小。注意:在表单的上下文中,使用“大”尺寸。可用:`大``默认``小` String AntSizeLDSType.Default
CultureInfo 属性将字符串转换为值和将值转换为字符串时将使用什么文化对 InputNumber 组件有用。 CultureInfo CultureInfo.CurrentCulture
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --

SliderMark API#

属性 描述 类型 默认值
Key 要打开的标记的编号。必须在包含 Slider 的 Min 和 Max 范围内 Double --
Value 标记的显示内容 RenderFragment --
Style 标记样式 String --
Select选择器 Switch开关
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.