Slider

Usage

A numeric model creates one thumb; a readonly [number, number] model creates a range. There is no range input. minValue/maxValue define the scale and step defines increments. minStepsBetweenThumbs keeps a minimum separation. Use a number input instead when exact typed entry is important.

Examples

Interact with the example and open Code for its complete implementation.

[
  20,
  60
]

Try and configure

Change the controls and try the live preview. Expand the application value or event to inspect its real data; the generated template stays with the configurator.

25

<neu-slider
  [(value)]="volume"
  [minValue]="0"
  [maxValue]="100"
  [step]="1"
  orientation="horizontal"
  [showTicks]="false"
  [showValue]="true"
  [label]="'Volume'"
  [unit]="'%'"
/>

import { signal } from '@angular/core';

export const volume = signal(25);

Signal Forms

Bind FormField once to the component; the field owns value and validation. The required validator treats 0 as a value. This example also uses min(10), so a value below ten is invalid. Leave the control to mark it touched, then reset the field to clear both value and interaction state.

Signal Forms guide

{
  "field": 0
}

Value and events

Use [(value)] or [value] with (valueChange), not both. The model synchronizes application state; other Outputs communicate their documented events. touch reports leaving/visiting the control, not a new value.

Accessibility and keyboard

Name the slider with label or ariaLabel and use unit to describe the value. A range exposes two separately focusable thumbs with minimum/maximum names. Arrow keys change one step, PageUp/PageDown ten steps, and Home/End uses the allowed bounds of the focused thumb.

API

Inputs, models and Outputs come from the pinned Core contract. Click named types to open their definitions. This component has no public template slots.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuSliderValue } from '@neural-ui/core/slider';

// Public declaration (reference only)
export type NeuSliderValue = SliderValue;

Styles and tokens

Load Core styles once. Use the public tokens below for local customization or a preset for application-wide changes. Keep labels, focus, selected options and disabled states readable in both light and dark themes.

Related components

Use the related controls for a different kind of value or interaction.

• NumberInput
• InputMask
• InputOTP