A slider component for selecting numeric values by dragging a handle along a track. RadzenSlider supports single value selection or range selection (min/max) with horizontal or vertical orientation. Provides an intuitive way to select numeric values within a range, especially useful when the exact value is less important than the approximate position, you want to show the valid range visually, or the input should be constrained to specific increments. Features single value or min/max range selection, Horizontal (default) or Vertical layout, Min/Max values defining the selectable range, Step property controlling value granularity, colored track showing selected portion for visual feedback, Arrow key support for precise adjustment, and drag gestures on mobile devices. For range selection, set Range=true and bind to IEnumerable<TValue> (e.g., IEnumerable<int>) for min/max values. Common uses include price filters, volume controls, zoom levels, or any bounded numeric input.
FormComponent<TValue>.GetValue
FormComponent<TValue>.OnContextMenu
FormComponent<TValue>.GetClassList
FormComponent<TValue>.FocusAsync
FormComponent<TValue>.TabIndex
FormComponent<TValue>.Placeholder
FormComponent<TValue>.Disabled
FormComponent<TValue>.EditContext
FormComponent<TValue>.ValueChanged
FormComponent<TValue>.FieldIdentifier
FormComponent<TValue>.ValueExpression
FormComponent<TValue>.FormFieldContext
FormComponent<TValue>.CurrentPlaceholder
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
ComponentBase.OnInitializedAsync
ComponentBase.OnParametersSet
ComponentBase.OnParametersSetAsync
ComponentBase.StateHasChanged
ComponentBase.ShouldRender
ComponentBase.OnAfterRender
ComponentBase.InvokeAsync
ComponentBase.DispatchExceptionAsync
ComponentBase.RendererInfo
ComponentBase.Assets
ComponentBase.AssignedRenderMode
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
public class RadzenSlider<TValue> : FormComponent<TValue>, IComponent, IHandleEvent, IHandleAfterRender, IRadzenFormComponent| Name | Description |
|---|---|
| TValue | The type of the slider value. Supports numeric types (int, decimal, double) or IEnumerable for range selection. |
Basic slider:
<RadzenSlider @bind-Value=@volume TValue="int" Min="0" Max="100" />
@code {
int volume = 50;
}Range slider for price filter:
<RadzenSlider @bind-Value=@priceRange TValue="IEnumerable<decimal>" Range="true"
Min="0" Max="1000" Step="10" />
@code {
IEnumerable<decimal> priceRange = new decimal[] { 100, 500 };
}Vertical slider with step:
<RadzenSlider @bind-Value=@value TValue="double" Min="0" Max="1" Step="0.1"
Orientation="Orientation.Vertical" Style="height: 200px;" />A slider component for selecting numeric values by dragging a handle along a track. RadzenSlider supports single value selection or range selection (min/max) with horizontal or vertical orientation. Provides an intuitive way to select numeric values within a range, especially useful when the exact value is less important than the approximate position, you want to show the valid range visually, or the input should be constrained to specific increments. Features single value or min/max range selection, Horizontal (default) or Vertical layout, Min/Max values defining the selectable range, Step property controlling value granularity, colored track showing selected portion for visual feedback, Arrow key support for precise adjustment, and drag gestures on mobile devices. For range selection, set Range=true and bind to IEnumerable<TValue> (e.g., IEnumerable<int>) for min/max values. Common uses include price filters, volume controls, zoom levels, or any bounded numeric input.
public RadzenSlider<TValue>()Gets a value indicating whether this instance has value.
public bool HasValue { get; }| Type | Description |
|---|---|
| bool | Gets a value indicating whether this instance has value. |
Determines the maximum value.
public decimal Max { get; set; }| Type | Description |
|---|---|
| decimal | Determines the maximum value. |
Determines the minimum value.
public decimal Min { get; set; }| Type | Description |
|---|---|
| decimal | Determines the minimum value. |
Specifies the orientation. Set to Orientation.Horizontal by default.
public Orientation Orientation { get; set; }| Type | Description |
|---|---|
| Orientation | Specifies the orientation. Set to Orientation.Horizontal by default. |
Gets or sets a value indicating whether this RadzenSlider<T> is range.
public bool Range { get; set; }| Type | Description |
|---|---|
| bool | Gets or sets a value indicating whether this RadzenSlider<T> is range. |
Gets or sets the step.
public string Step { get; set; }| Type | Description |
|---|---|
| string | Gets or sets the step. |
Gets or sets the value.
public TValue Value { get; set; }| Type | Description |
|---|---|
| TValue | Gets or sets the value. |
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)| Type | Name | Description |
|---|---|---|
| Rendering.RenderTreeBuilder | __builder |
protected override string GetComponentCssClass()| Type | Description |
|---|---|
| string |
protected override Task OnAfterRenderAsync(bool firstRender)| Type | Name | Description |
|---|---|---|
| bool | firstRender |
| Type | Description |
|---|---|
| Task |
Called when value changed.
public Task OnValueChange(decimal value, bool isMin)| Type | Name | Description |
|---|---|---|
| decimal | value | The value. |
| bool | isMin | if set to true [is minimum]. |
| Type | Description |
|---|---|
| Task |
public override Task SetParametersAsync(ParameterView parameters)| Type | Name | Description |
|---|---|---|
| ParameterView | parameters |
| Type | Description |
|---|---|
| Task |