Sliders

SliderControl · RangeSliderControl

Pick one number, or a lower and upper bound, by dragging or with the arrow keys.

Overview

SliderControl is a styled native <input type="range">: Min, Max and Step map straight onto the input, and Value binds two ways. ValueChanged fires while the thumb is dragged and once more on release, so a bound page updates live. RangeSliderControl stacks two sliders for a NumericRange and keeps Start at or below End.

Examples

#Slider

Step="0.5" gives half-percent markup. ShowValue="false" hides the built-in readout so the page can format its own; the disabled slider keeps the default readout. Unmatched attributes such as aria-label land on the input.

Example

Razor

Markup

12.5%

Cost $10,000 + 12.5% markup = $11,250

Tax rate

8.25

#Range slider

One NumericRange binds both thumbs. Format shapes the readout; StartLabel and EndLabel name the two inputs. Dragging the start past the end stops at the end, and the other way round. The list below filters as the range moves.

Example

Razor

At least

At most

$250 – $1,250

3 of 6 options in budget

Tile backsplash$350
Laminate counters$450
Butcher-block counters$900

Documentation

SliderControl parameters

Parameter	Type	Default	Description
`Value`	`double`	`0`	Current number. Two-way with `@bind-Value`.
`ValueChanged`	`EventCallback<double>`	—	Fires on every `input` event while dragging and again on `change` at release.
`Min / Max`	`double`	`0 / 100`	Bounds, written to the input's `min` and `max`.
`Step`	`double`	`1`	Increment for dragging and the arrow keys.
`ShowValue`	`bool`	`true`	Renders the raw `Value` after the track. No format option; hide it to format your own.
`Disabled`	`bool`	`false`	Disables the input and dims the host. The base `Enabled` is not read by this control.
`CssClass / Style (base)`	`string?`	`null`	On the host element. The base `Visible` is not applied; hide the host yourself.
`(unmatched attributes)`	`Dictionary<string,object>`	—	Forwarded to the `<input>`: `aria-label`, `name`, `data-*`.

RangeSliderControl parameters

Parameter	Type	Default	Description
`Value`	`NumericRange`	`(25, 75)`	Start and end. Two-way with `@bind-Value`. Must lie inside `Min`..`Max` with `Start <= End`, or the control throws `ArgumentException` on render.
`ValueChanged`	`EventCallback<NumericRange>`	—	Fires after either thumb moves, with the whole range.
`ValueExpression`	`Expression<Func<NumericRange>>?`	`null`	Set by `@bind-Value` inside an `EditForm`; the field is marked changed on the cascaded `EditContext`.
`Min / Max`	`double`	`0 / 100`	Bounds for both thumbs. `Min` must be below `Max`.
`Step`	`double`	`1`	Increment; values snap to the nearest step from `Min`. Must be positive.
`ReadOnly`	`bool`	`false`	Disables both inner sliders without the read-only look of a text box.
`ShowValue`	`bool`	`true`	Renders `Start – End` in an `<output>` under the sliders.
`Format`	`string`	`"0.##"`	Numeric format for the readout, current culture.
`StartLabel / EndLabel`	`string`	`"Range start" / "Range end"`	Visible label and `aria-label` of each slider.
`AriaLabel`	`string`	`"Range"`	Accessible name of the group.
`Enabled (base)`	`bool`	`true`	false disables both sliders.
`Visible (base)`	`bool`	`true`	false hides the group with `display:none`.
`CssClass / Style (base)`	`string?`	`null`	On the group element.

NumericRange

Property	Type	Default	Description
`Start`	`double`	—	Lower bound.
`End`	`double`	—	Upper bound.
`ctor`		—	`new(start, end)`; a positional record with value equality, so an unchanged range does not raise `ValueChanged`.

Methods

Method	Inputs	Returns	Description
`RangeSliderControl.SetValueAsync()`	`range`	`Task`	Sets both bounds at once, raises `ValueChanged` and notifies the `EditContext`. Ignored when disabled, read-only or unchanged; throws `ArgumentOutOfRangeException` outside `Min`..`Max`.

CSS classes

Class	Effect
`fx-slider-host · .fx-slider-disabled`	Inline flex row, full width, 120px minimum; `disabled` adds opacity 0.5 and `pointer-events: none`.
`fx-slider-range`	The input: 6px track, 18px round thumb that scales on hover.
`fx-slider-value`	The readout: bold, right-aligned, 32px minimum width.
`fx-range-slider`	Grid of two labelled rows (95px label column) and the `<output>` readout; 220px minimum width.

Neither stylesheet reads a --fx-* variable: the track is #e2e8f0 and the thumb #2563eb. Recolour with CssClass and a scoped ::deep rule on .fx-slider-range.

Keyboard and accessibility

Keyboard (native range input)

Key	Action
`Arrow Right / Arrow Up`	Increase by one `Step`.
`Arrow Left / Arrow Down`	Decrease by one `Step`.
`Home / End`	Jump to `Min` / `Max`.
`Page Up / Page Down`	Larger jump; the size is chosen by the browser.

The slider is a native range input, so the browser exposes role="slider" with the current, minimum and maximum values. Name it with aria-label, which passes through to the input.
The ShowValue readout is plain text next to the input; it is not linked with aria-describedby.
RangeSliderControl renders role="group" with AriaLabel; each thumb is named by StartLabel or EndLabel.
Disabled sets the input's disabled attribute and adds pointer-events: none to the host, so a disabled slider is skipped by Tab.