Blazorise RangeSlider component

RangeSlider lets users choose a start and end value from the same numeric range.

Use <RangeSlider> when users need to define both a minimum and a maximum value, such as a price filter, delivery window, score band, or capacity range. It renders two coordinated handles, keeps the selected interval highlighted, and normalizes the final range for you.

RangeSlider binds to RangeSliderValue<TValue>, giving you strongly typed Start and End values. Common numeric types such as int, double, and decimal are supported. If you only need one value, use Slider instead.

Examples

Basic range selection

Bind the selected interval to a RangeSliderValue<int> and show the current values below the slider.

Selected range: 20 - 70

<Field>
    <RangeSlider TValue="int" @bind-Value="@selectedRange" Min="0" Max="100" Step="1" StartAriaLabel="Minimum value" EndAriaLabel="Maximum value" />
    <FieldHelp>Selected range: @selectedRange.Start - @selectedRange.End</FieldHelp>
</Field>

@code {
    RangeSliderValue<int> selectedRange = new( 20, 70 );
}

Note: Since RangeSlider is a generic component, the bound value must match RangeSliderValue<TValue>. In most cases Blazor can infer the type from @bind-Value, but you can always set TValue explicitly.

Decimal values

Use decimal together with Step for prices, measurements, and other non-integer ranges.

Price filter: $50.00 - $175.00

<Field>
    <RangeSlider TValue="decimal" @bind-Value="@priceRange" Min="0m" Max="250m" Step="12.5m" StartAriaLabel="Minimum price" EndAriaLabel="Maximum price" />
    <FieldHelp>Price filter: @PriceRangeText</FieldHelp>
</Field>

@code {
    RangeSliderValue<decimal> priceRange = new( 50m, 175m );

    string PriceRangeText => $"${priceRange.Start:0.00} - ${priceRange.End:0.00}";
}

Clamp handles instead of swapping

By default, dragging one handle past the other swaps the logical Start and End values.

Enable ClampToOtherHandle when you want the active handle to stop at the other handle instead.

Try dragging one handle into the other. Current selection: 25% - 75%

<Field>
    <RangeSlider TValue="int" @bind-Value="@capacityRange" Min="0" Max="100" Step="5" ClampToOtherHandle StartAriaLabel="Minimum capacity" EndAriaLabel="Maximum capacity" />
    <FieldHelp>Try dragging one handle into the other. Current selection: @capacityRange.Start% - @capacityRange.End%</FieldHelp>
</Field>

@code {
    RangeSliderValue<int> capacityRange = new( 25, 75 );
}

Prevent overlapping values

Combine ClampToOtherHandle with AllowEqualValues="false" to keep at least one step between the handles.

Experience filter: 5 to 20 years. Handles keep at least one step between them.

<Field>
    <RangeSlider TValue="int" @bind-Value="@experienceRange" Min="0" Max="30" Step="5" ClampToOtherHandle AllowEqualValues="false" StartAriaLabel="Minimum experience" EndAriaLabel="Maximum experience" />
    <FieldHelp>Experience filter: @experienceRange.Start to @experienceRange.End years. Handles keep at least one step between them.</FieldHelp>
</Field>

@code {
    RangeSliderValue<int> experienceRange = new( 5, 20 );
}

Hide value tooltips

Set ShowValueTooltips="false" when you prefer to show the selected range in surrounding text, filter chips, or field help.

Monthly budget: $1000 - $3000

<Field>
    <RangeSlider TValue="int" @bind-Value="@budgetRange" Min="500" Max="5000" Step="250" ShowValueTooltips="false" StartAriaLabel="Minimum budget" EndAriaLabel="Maximum budget" />
    <FieldHelp>Monthly budget: @BudgetRangeText</FieldHelp>
</Field>

@code {
    RangeSliderValue<int> budgetRange = new( 1000, 3000 );

    string BudgetRangeText => $"${budgetRange.Start} - ${budgetRange.End}";
}

Best Practices

Choose meaningful steps

Match Step to real user decisions. Use small steps for precise adjustments and larger steps for broad filters so the slider stays easy to drag.

Keep the current range visible

Tooltips help during dragging, but persistent labels or field help reduce ambiguity on touch devices and in dense filtering panels.

Pick the right crossing behavior

Keep the default swapping behavior when either handle can freely move across the range. Enable ClampToOtherHandle when users think in fixed minimum and maximum bounds, and add AllowEqualValues="false" when the selected interval must always stay open.

Label both handles for accessibility

Use StartAriaLabel and EndAriaLabel when the context is not obvious from the surrounding form so screen reader users can distinguish the two handles.

API

Parameters

Parameter	Description	Type	Default
`AllowEqualValues`	Specifies whether both handles can point to the same value. Remarks When set to `false` and ClampToOtherHandle is enabled, the handles keep at least one Step between them.	`bool`	`true`
`AriaDescribedBy`	Gets or sets the aria-describedby attribute value. Remarks When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.	`string`
`AriaInvalid`	Gets or sets the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`AriaLabelledBy`	Gets or sets the aria-labelledby attribute value. Remarks When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel.	`string`
`AriaRequired`	Gets or sets the aria-required attribute value. Remarks When set, this value overrides the required-field state resolved from the parent Validation.	`bool`	`false`
`Autofocus`	Set's the focus to the component after the rendering is done.	`bool`	`false`
`ChildContent`	Specifies the content to be rendered inside this RangeSlider.	`RenderFragment`	`null`
`ClampToOtherHandle`	Specifies whether the active handle should stop at the other handle while dragging. Remarks When set to `true`, the active handle is clamped to the other handle instead of swapping positions.	`bool`	`false`
`Disabled`	Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.	`bool`	`false`
`EndAriaLabel`	Accessible label text for the end handle.	`string`	`"End value"`
`Feedback`	Placeholder for validation messages.	`RenderFragment`	`null`
`Max`	The maximum value to accept for this input.	`TValue`	`null`
`Min`	The minimum value to accept for this input.	`TValue`	`null`
`ReadOnly`	Add the readonly boolean attribute on an input to prevent modification of the input’s value.	`bool`	`false`
`ShowValueTooltips`	Specifies if the value tooltips are visible.	`bool`	`true`
`Size`	Sets the size of the input control.	`Size?`	`null`
`StartAriaLabel`	Accessible label text for the start handle.	`string`	`"Start value"`
`Step`	Specifies the interval between valid values.	`TValue`	`null`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`Value`	Gets or sets the value inside the input field.	`TValue`	`null`
`ValueExpression`	Gets or sets an expression that identifies the input value.	`Expression<Func<TValue>>`	`null`

Events

Event	Description	Type
`Blur`	The blur event fires when an element has lost focus.	`EventCallback<FocusEventArgs>`
`CustomValidationValue`	Used to provide custom validation value on which the validation will be processed with the Validator handler. Remarks Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.	`Func<TValue>`
`FocusIn`	Occurs when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Occurs when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Occurs when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Occurs when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Occurs when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`OnFocus`	Occurs when the input box gains or loses focus.	`EventCallback<FocusEventArgs>`
`ValueChanged`	Occurs after value has changed.	`EventCallback<TValue>`

Methods

Method	Description	Return	Parameters
`Focus`	Sets the focus on the underline element.	`Task`	`bool scrollToElement`
`Revalidate`	Forces the Validation (if any is used) to re-validate with the new custom or internal value.	`Task`