Class RadzenSlider<TValue>

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.

Inheritance
object
ComponentBase
RadzenComponent
FormComponent<TValue>
RadzenSlider<TValue>
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenSlider<TValue> : FormComponent<TValue>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable, IRadzenFormComponent
Type Parameters
Name Description
TValue

The type of the slider value. Supports numeric types (int, decimal, double) or IEnumerable for range selection.
Examples

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;" />

Constructors

RadzenSlider()

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.

Declaration
public RadzenSlider()
Examples

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;" />

Properties

HasValue

Gets a value indicating whether this instance has value.

Declaration
public override bool HasValue { get; }
Property Value
Type Description
bool

true if this instance has value; otherwise, false.
Overrides

Max

Determines the maximum value.

Declaration
[Parameter]
public decimal Max { get; set; }
Property Value
Type Description
decimal

The maximum value.

Min

Determines the minimum value.

Declaration
[Parameter]
public decimal Min { get; set; }
Property Value
Type Description
decimal

The minimum value.

Orientation

Specifies the orientation. Set to Orientation.Horizontal by default.

Declaration
[Parameter]
public Orientation Orientation { get; set; }
Property Value
Type Description
Orientation

Range

Gets or sets a value indicating whether this RadzenSlider<TValue> is range.

Declaration
[Parameter]
public bool Range { get; set; }
Property Value
Type Description
bool

true if range; otherwise, false.

Step

Gets or sets the step.

Declaration
[Parameter]
public string Step { get; set; }
Property Value
Type Description
string

The step.

Value

Gets or sets the value.

Declaration
[Parameter]
public override TValue Value { get; set; }
Property Value
Type Description
TValue

The value.
Overrides

Methods

BuildRenderTree(RenderTreeBuilder)

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.

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

Dispose()

Disposes this instance.

Declaration
public override void Dispose()
Overrides

GetComponentCssClass()

Gets the component CSS class.

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string
Overrides

OnAfterRenderAsync(bool)

Called by the Blazor runtime.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender
Returns
Type Description
Task
Overrides

OnValueChange(decimal, bool)

Called when value changed.

Declaration
[JSInvokable("RadzenSlider.OnValueChange")]
public Task OnValueChange(decimal value, bool isMin)
Parameters
Type Name Description
decimal value

The value.
bool isMin

if set to true [is minimum].
Returns
Type Description
Task

SetParametersAsync(ParameterView)

Sets the parameters asynchronous.

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters

The parameters.
Returns
Type Description
Task

Task.
Overrides

Implements

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

Learn More

Download Now