Components / Slider

Slider

A styled native range input for a single numeric value.

Volume64%

example.component.html

html

<label for="volume">
  Volume
</label>
<input aevkoSlider id="volume" type="range" min="0" max="100" value="64" />

Installation

npx aevko-ui@latest add slider --yes

Source ownership

Customization

Use native min, max and step values and theme the track/thumb locally. Build a separate multi-thumb control only when a real interval workflow requires it.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Visual range axis.
`invalid`	`boolean`	`false`	Writes aria-invalid for validation.
`native attributes`	`HTMLInputElement`	`browser default`	Supports min, max, step, value, disabled and Forms.

Accessibility contract

Accessibility

Included behavior

Native range semantics provide keyboard, touch, value and Angular Forms behavior without a custom slider engine.

Your responsibility

Provide a visible label and expose the current value in nearby text when the numeric meaning is not otherwise obvious.

Back to all components