Ant Design Blazor
Slider
A Slider component for displaying current value and intervals in range.
When To Use
- To input a value in a range.
Examples
Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.
You can add an icon beside the slider to make it meaningful.
The onChange callback function will fire when the user changes the slider's value. The onAfterChange callback function will fire when onmouseup fired.
Using reverse to render slider reversely.
When tooltipVisible is true, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
Synchronize with InputNumber component.
Use tipFormatter to format content of Tooltip. If tipFormatter is null, hide it.
Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.
The vertical Slider.
Slider API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| DefaultValue | ParameterThe default value of slider. When AntDesign.Slider`1.Range is false, use number, otherwise, use [number, number] |
TValue | -- |
| Disabled | ParameterIf true, the slider will not be interactable | Boolean | -- |
| Dots | ParameterCurrently not implemented. Whether the thumb can drag over ticks only | Boolean | -- |
| Included | ParameterMake effect when AntDesign.Slider`1.Marks not null, true means containment and false means coordinative |
Boolean | true |
| Marks | ParameterTick mark of Slider | SliderMark[] | -- |
| Max | ParameterThe maximum value the slider can slide to | Double | 100 |
| Min | ParameterThe minimum value the slider can slide to | Double | 0 |
| Range | If the slider is a range slider or not. Determined by type of TValue |
Boolean | -- |
| Reverse | ParameterOrder and direction of numbers and min/max. When true, Max is on the left and Min is on the right When false, Min is on the left and Max is on the right |
Boolean | false |
| Step | ParameterThe granularity the slider can step through values. Must greater than 0, and be divided by (AntDesign.Slider`1.Max - AntDesign.Slider`1.Min). When AntDesign.Slider`1.Marks is not null, AntDesign.Slider`1.Step can be null. |
Double? | -- |
| Vertical | ParameterIf true, the slider will be vertical. If false, it will be horizontal. | Boolean | false |
| OnAfterChange | ParameterCallback executed when onmouseup is fired. | EventCallback<TValue> | -- |
| OnChange | ParameterCallback executed when the user changes the slider's value. | EventCallback<TValue> | -- |
| HasTooltip | ParameterWhether markers should have tooltips or not | Boolean | true |
| TipFormatter | ParameterMethod to get display value for tooltip. Will pass slider value and get string for display back | Func<Double, String> | (value) => value.ToString() |
| TooltipPlacement | ParameterSet Tooltip display position. See Tooltip for more information |
Placement | Right for vertical. Top for horizontal |
| TooltipVisible | ParameterIf true Tooltip will always show | Boolean | -- |
| GetTooltipPopupContainer | ParameterNot currently implemented. The DOM container of the Tooltip | Object | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.Default |
| CultureInfo | ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. | CultureInfo | CultureInfo.CurrentCulture |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
SliderMark API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Key | Number for mark to be on. Must be in the range of the Min and Max of the containing Slider | Double | -- |
| Value | Display content for the mark | RenderFragment | -- |
| Style | Style for the mark | String | -- |