Compare

Reveal before and after content with a controlled comparison slider.

Category: Layout and content
Import: @neural-ui/core/compare
Selector: neu-compare

import { NeuCompareComponent } from '@neural-ui/core/compare';

Usage

Compare is one before/after control, composed from three auxiliary pieces—not four different comparators. Import NeuCompareComponent, NeuCompareItemComponent, NeuCompareIndicatorComponent and NeuCompareHandleComponent from @neural-ui/core/compare. The complete examples on this page show how they fit together. The same coastal illustration is grayscale before and in color after; those image styles belong to the application.

Use two CompareItem children, one CompareIndicator and one CompareHandle. position="before" or "after" identifies each surface. Accept valueChange by assigning $event.value to the applied value; defaultValue is a fallback, not persistent local state. The indicator and handle inherit the parent orientation and position and must remain inside Compare.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Before

After

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Before

After

Events: 0

disabled

slideOnHover

step

Advanced options · 3

<neu-compare
  class="remaining-compare"
  [value]="position()"
  (valueChange)="position.set($event.value)"
  (valueChangeEnd)="record('valueChangeEnd', $event.value)"
  [orientation]="'horizontal'"
  [disabled]="false"
  [slideOnHover]="false"
  [step]="5"
  ><neu-compare-item position="before"
    ><div class="remaining-compare-surface remaining-before remaining-compare-surface--image">
      <img class="remaining-compare-image" src="assets/media/coast.svg" [alt]="t('Coastal light before color adjustment', 'Luz de costa antes del ajuste de color')" width="800" height="450" draggable="false" />
      <span class="remaining-compare-caption">{{ t("Before", "Antes") }}</span>
    </div></neu-compare-item
  ><neu-compare-item position="after"
    ><div class="remaining-compare-surface remaining-after remaining-compare-surface--image">
      <img class="remaining-compare-image" src="assets/media/coast.svg" [alt]="t('Coastal light after color adjustment', 'Luz de costa después del ajuste de color')" width="800" height="450" draggable="false" />
      <span class="remaining-compare-caption">{{ t("After", "Después") }}</span>
    </div></neu-compare-item
  ><neu-compare-indicator
    ><span class="remaining-compare-line"></span></neu-compare-indicator
  ><neu-compare-handle
    [ariaLabel]="t('Compare position', 'Posición de comparación')"
    ></neu-compare-handle
  ></neu-compare
>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

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

export const position = signal(50);

State and events

Compose Compare with two CompareItem children, one CompareIndicator and one CompareHandle. position="before" or "after" identifies each surface. Accept valueChange by assigning $event.value to the applied value; defaultValue is a fallback, not persistent local state. The indicator and handle inherit the parent orientation and position. They must remain inside Compare. Their projected content is application-owned.

Accessibility and keyboard

Focus CompareHandle with Tab. Arrow keys adjust the position; Home/End reach the limits. Pointer dragging proposes changes through the same Outputs.

Key	Action
`Tab`	Focus the enabled CompareHandle range control.
`Arrow keys`	Adjust the comparison position through the range control.
`Home`	Move to the minimum position.
`End`	Move to the maximum position.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

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

Name	Type	Default	Template binding	Description
`defaultValue`	`number`	`50`	`[defaultValue]`	Fallback comparison position when value is undefined; it is not a persistent uncontrolled owner.
`disabled`	`boolean`	`false`	`[disabled]`	Prevents interaction with this control.
`max`	`number`	`100`	`[max]`	Upper numeric bound.
`min`	`number`	`0`	`[min]`	Lower numeric bound.
`orientation`	`NeuCompareOrientation`	`'horizontal'`	`[orientation]`	Root layout and keyboard orientation: horizontal or vertical.
`slideOnHover`	`boolean`	`false`	`[slideOnHover]`	Propose comparison-position changes on pointer movement without requiring a drag.
`step`	`number`	`1`	`[step]`	Comparison-position increment in percentage points.
`value`	`number \| undefined`	`undefined`	`[value]`	Applied comparison position as a percentage. Accept valueChange to move the split.

Outputs

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

Name	Payload	Template binding	Description
`valueChange`	`NeuCompareValueChangeEvent`	`(valueChange)="onValueChange($event)"`	Proposes the next comparison position as $event.value. Apply it to value to accept the change.
`valueChangeEnd`	`NeuCompareValueChangeEvent`	`(valueChangeEnd)="onValueChangeEnd($event)"`	Reports the position when a pointer or keyboard interaction completes.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Projected content View example	Content projection Application-provided content.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Projected content

*

Before

After

Events: 0

Public Types

Open a type to inspect its definition and interface fields.

NeuCompareOrientationTypeScript

import type { NeuCompareOrientation } from '@neural-ui/core/compare';

// Public declaration (reference only)
type NeuCompareOrientation = 'horizontal' | 'vertical';

NeuCompareValueChangeEventTypeScript

import type { NeuCompareValueChangeEvent } from '@neural-ui/core/compare';

// Public declaration (reference only)
interface NeuCompareValueChangeEvent {
  originalEvent: Event;
  value: number;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-fg`	Foreground drawn over the primary background	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-shadow`	Surface or overlay elevation	Shared by other Core consumers; scope the override.	`0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04)`