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.

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.

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.

All Angular Forms adapters

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

Signal Forms

Reactive Forms

ngModel

States and Field composition

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

Disabled

Readonly

Invalid

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.

ACCESSIBILITY

Native range semantics

Each thumb remains a native input rather than a synthetic drag surface.

Native semantics

Browsers expose min, max, step and current value from input[type=range]. The visual fill does not replace the native control.

Keyboard

Arrow keys adjust by step, Page Up and Page Down make larger changes, and Home and End reach the bounds.

Range thumb names

Two thumbs require distinct names such as Minimum budget and Maximum budget. Both inputs share descriptions and validation state.

Human-readable values

Use ariaValueText for single values and the two range aria-value-text inputs when raw numbers do not communicate units or meaning.

Readonly versus disabled

Readonly preserves focus and blocks pointer and keyboard mutation. Disabled uses the native disabled state and suppresses hover feedback.

Field state

Slider inherits deterministic ids, descriptions, invalid, disabled, readonly, fluid and unstyled state from NeuralField.

PUBLIC API

Slider contracts

Canonical exports include the complete single, range, thumb and event type surface.

Inputs and model

Input	Type	Default	Purpose
value	model<number \| [number, number]>	0	Single value or ordered range tuple.
range	boolean	false	Renders two native range thumbs.
min / max	number	0 / 100	Normalized inclusive numeric bounds.
step	number	1	Positive interaction increment.
orientation	'horizontal' \| 'vertical'	'horizontal'	Visual and ARIA orientation.
showValue	boolean	false	Displays the normalized value beside the control.
valueLabel	string	''	Overrides visible output text.
rangeStartAriaLabel / rangeEndAriaLabel	string	''	Distinct accessible names for range thumbs.
rangeStartAriaValueText / rangeEndAriaValueText	string	''	Human-readable range thumb values.
disabled / readonly / invalid	boolean	false	Interaction and validation states.
touched / dirty	boolean	false	Forms state parity inputs.
name / sliderId	string	''	Native name and deterministic id.
ariaLabel / ariaLabelledBy / ariaValueText	string	''	Single-thumb accessible naming and value description.
fluid	boolean	false	Fills available inline size.
unstyled	boolean	false	Removes NeuralNg visual classes.
sliderClass / inputClass	string	''	Additive root and native input classes.
classes	NeuralSliderClasses	{}	Typed root, input, output and range-layer slots.

Outputs

valueChangeNeuralSliderValue

Generated model output for every value update.

slideStartNeuralSliderEvent

Pointer interaction begins.

slideEndNeuralSliderEvent

Pointer interaction ends.

valueCommitNeuralSliderEvent

Native change or range-track selection commits.

touchvoid

A native thumb loses focus.

Methods

focus(options?)void

Focuses the first native thumb.

reset()void

Restores min, or [min,max] in range mode.

Typed class slots

root

Complete control and optional output layout.

input

Single input or both native range inputs.

value

Visible value output.

range

Two-thumb positioning surface.

track

Range track.

fill

Selected interval between thumbs.

Public types

NeuralSliderValue

number | NeuralSliderRangeValue

NeuralSliderRangeValue

[number, number]

NeuralSliderThumb

'start' | 'end'

NeuralSliderOrientation

'horizontal' | 'vertical'

NeuralSliderEvent

{ value; originalEvent; thumb? }

NeuralSliderClasses

Typed root, input, value, range, track and fill slots.

Legacy alias

SliderComponent remains deprecated for compatibility. New code and AI context use NeuralSlider.

DESIGN TOKENS

Slider tokens

Neutral, dark mode and custom themes share one semantic slider contract.

Layout

--neural-slider-width

Component inline size.

--neural-slider-gap

Spacing between component items.

--neural-slider-vertical-height

Vertical block size.

--neural-slider-font

Component font shorthand.

Track and fill

--neural-slider-track-size

Track width and height.

--neural-slider-track-radius

Track corner radius.

--neural-slider-track-background

Track background surface.

--neural-slider-fill-background

Fill background surface.

--neural-slider-fill-background-invalid

Invalid fill background surface.

Thumb and state

--neural-slider-thumb-size

Thumb width and height.

--neural-slider-thumb-background

Thumb background surface.

--neural-slider-thumb-background-hover

Hovered thumb background surface.

--neural-slider-thumb-background-invalid

Invalid thumb background surface.

--neural-slider-thumb-border

Thumb border shorthand.

--neural-slider-thumb-radius

Thumb corner radius.

--neural-slider-thumb-shadow

Thumb box shadow.

--neural-slider-focus-ring

Component keyboard focus ring.

--neural-slider-focus-ring-offset

Component focus ring offset.

--neural-slider-disabled-opacity

Disabled opacity.

Value

--neural-slider-color

Component foreground color.

--neural-slider-value-color

Value foreground color.

--neural-slider-value-font-size

Value font size.

Primary

Surface