Specialized inputs

AppSlider

Single-thumb and dual-thumb slider — the visual way to pick a value or range.

<app-slider label="Volume" name="volume" value="50" />

A slider lets users pick a single value or a range by dragging a thumb (or clicking the track). It supports keyboard navigation (arrow keys, Page Up/Down, Home/End), form submission, and optional value display. Use range mode for two-value ranges (price, date range, filter bounds).

It renders the shared <wui-slider> control and takes its look entirely from @webority/theme, so the Razor <app-slider> and the React <AppSlider> render identical sliders on every Webority surface.

Playground

Every meaningful attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the slider above it.

<app-slider label="Volume" name="pg-slider" value="50" />
The playground preview is staticEvery change here re-submits the form and re-renders the tag helper from scratch — dragging or keyboard-stepping still work (the shared client behaviour is wired regardless), but they won't update the query string above. Try the live slider directly in this playground to feel the drag and step, then use the controls to see every attribute combination.

Basic (single-thumb)

A single-thumb slider captures one value. The label, hint, and error attributes wrap it in the standard .field shell and wire accessibility attributes.

Labeled slider
The value is numeric; use the show-value attribute to display it next to the slider.
Show code 
<app-slider label="Volume" name="volume" value="50" />

The slider is form-associated — the value posts under name when the form submits. It also dispatches a native change event you can listen for.

Dual-thumb range mode

Set the range attribute to enable two thumbs. Pass start and end instead of value; they post under start-name and end-name. Thumbs cannot cross.

Price range
Both thumbs move independently and clamp at each other's position.
Show code 
<app-slider range="true" label="Price range" start="20" end="80" start-name="min_price" end-name="max_price" show-value="true" unit="$" />

Showing the value

Set show-value to display the current value(s) next to the slider. The optional unit attribute adds a suffix (e.g., %, $, km).

With unit label
The value and unit render as a live label next to the slider.
Show code 
<app-slider label="Discount" name="discount" value="75" show-value="true" unit="%" min="0" max="100" />

Size variants

The size attribute controls the height: sm (28px), default (32px), or lg (36px). The thumb, track, and text all scale together.

All three sizes
Use the size that matches your container and content density.
Show code 
<app-slider label="Small (sm)" name="v1" value="50" size="sm" />
<app-slider label="Medium (default)" name="v2" value="50" />
<app-slider label="Large (lg)" name="v3" value="50" size="lg" />

Step & keyboard

min and max set the range (0–100 by default). step controls the increment for keyboard navigation and dragging (1 by default).

Custom bounds and step
Arrow keys and drags respect the step; PageUp/PageDown step by 10×.
Show code 
<app-slider label="Increment (step=10)" name="increment" value="50" min="0" max="100" step="10" show-value="true" />

When a thumb is focused:

  • ← → — decrement/increment by step
  • Page Down Page Up — decrement/increment by 10× step
  • Home End — jump to min / max

You can also click anywhere on the track to move the nearest thumb to that position.

Error & hint

The error attribute marks the field invalid (sets aria-invalid="true", renders an error message below). The hint attribute shows helper text (hidden when error is present).

With error state
Errors always take precedence over hints in the display.
Value too low
Show code 
<app-slider label="Minimum requirement" name="minimum" value="30" error="Value too low" hint="Must be at least 50" show-value="true" />

Disabled state

Set disabled="true" to prevent interaction and mute the visuals. The control still posts an empty value in forms.

Disabled slider
Cannot be interacted with; the form mirror is also disabled.
Show code 
<app-slider label="Locked setting" name="locked" value="50" disabled="true" show-value="true" />

When to use

Use when:

  • Picking a single numeric value visually (volume, brightness, rating, discount %)
  • Selecting a range (price range, budget, date window, filter bounds)
  • Comparing multiple values on a continuous scale
  • Keyboard input is secondary to visual feedback

Don't use when:

  • Precise multi-digit values are needed — use <app-number-input>
  • Choosing from categorical options — use <app-select>, <app-radio>, or <app-segmented>
  • Toggling a boolean — use <app-switch>
  • The scale is unclear or lacks reference points — add labels, legends, or example values first

Every option

The whole surface of the component, one cell per value — mode, bounds, step, unit, and the states a normal example never shows together.

No tick marks / labeled stepsThe current <wui-slider> implementation has no marks/ticks attribute — it renders a plain track and thumb(s) only. A caller wanting labeled steps composes its own scale markup below the slider (see the Step & keyboard example above).

mode — single vs range

(default) single-thumb
range — dual-thumb

size — every size

size="sm"
size="md"
size="lg"

state

(default)
required
disabled
error + hint (hint hidden)
Value too low
hint only
Must be at least 50
disabled + range

show-value & unit

(no show-value)
show-value="true"
show-value="true" unit="%"
range show-value="true" unit="$"

bounds & step

(default) min="0" max="100" step="1"
step="10"
min="50" max="150"
range min="50" max="150" step="5"

Attributes

AttributeTypeDefaultDescription
labelstring—Field label above the control.
namestring—Form field name for single-thumb mode; omit in range mode.
valuestring50Current value (single-thumb mode only). Omit in range mode; use start/end instead.
startstring25Range start (range mode only). Used with end and start-name.
endstring75Range end (range mode only). Used with start and end-name.
start-namestring—Form field name for range start (range mode only).
end-namestring—Form field name for range end (range mode only).
mindecimal0Minimum value.
maxdecimal100Maximum value.
stepdecimal1Increment step for keyboard navigation and dragging.
requiredboolfalseRenders the required asterisk on the label.
hintstring—Helper text below the control (hidden when error is present).
errorstring—Validation message; replaces the hint and marks the field invalid.
sizestring—Control height tier: sm / lg. Omit for the default (md).
disabledboolfalseDisables the field.
show-valueboolfalseDisplays the current value(s) next to the slider.
unitstring—Suffix for the value label (e.g., %, $, km). Only used if show-value="true".
rangeboolfalseEnables dual-thumb range mode. Use start/end instead of value.
asp-forModelExpression—Razor-only. Binds name, id, value, label and required from a model property; explicit attributes still win.
input-classstring—Extra classes on the control itself (the wui-slider) — the React className counterpart. The plain class attribute merges onto the .field wrapper instead.

Form submission

The slider creates hidden form mirror input(s) for posting values to the server:

  • Single-thumb mode: posts the value under name
  • Range mode: posts start under start-name and end under end-name

The slider always participates in form submission and respects form reset (restores the initial value/range).