NEURALNG
FORMSBETA

Slider

Native numeric selection with single and range values, logical orientation, precise steps, complete Forms support and headless visual ownership.

Native range inputRTL awareTwo-thumb range

GET STARTED

Import

Import the canonical standalone control from its granular entry point.

app.ts TypeScript 
import { NeuralSlider } from '@neural-ng/core/slider';

@Component({ imports: [NeuralSlider] })

Single value

Bind the Signal model directly. showValue renders the normalized value while fluid fills the available width.

45

Bounds, steps and labels

Min and max normalize reversed bounds. Step is positive and valueLabel can present a domain-specific visual value.

22 °C

Two-thumb range

Range keeps an ordered tuple, prevents thumb crossover and moves the nearest thumb when its track is clicked.

1200 – 3600

No committed interaction yet.

Horizontal and vertical

Vertical orientation changes the native writing mode and keeps its value increasing from bottom to top.

45
63

All Angular Forms adapters

The same value control works with Signal Forms, Reactive Forms and template-driven forms.

Signal Forms

35

Reactive Forms

55

ngModel

70

States and Field composition

Disabled leaves interaction, readonly remains focusable without hover feedback, and Field supplies shared invalid and fluid state.

Disabled

35

Readonly

36

Invalid

80

Interaction lifecycle

slideStart and slideEnd describe pointer motion; valueCommit reports a native change or a committed range-track click with the active thumb.

Logical RTL behavior

Native single controls follow document direction. Range track clicks also measure from logical start, so right-to-left layouts choose the expected value.

20 – 70

Unstyled and typed slots

Native inputs, normalized values and structural range layers stay intact while Tailwind owns the visual layer.

68