Comparison slider

A before/after image comparison.

AfterBefore

import { BuiComparisonSlider } from 'ng-blatui';

<bui-comparison-slider before="/before.jpg" after="/after.jpg" beforeLabel="Before" afterLabel="After" />

No labels

<bui-comparison-slider before="/before.jpg" after="/after.jpg" beforeLabel="" afterLabel="" />

API reference

Inputs

Prop	Type	Default	Description
`before`	`string`	`''`	Source URL of the "before" image (revealed on the left of the divider).
`after`	`string`	`''`	Source URL of the "after" image (shown on the right of the divider).
`beforeLabel`	`string`	`''`	Caption badge shown over the "before" image; hidden when empty.
`afterLabel`	`string`	`''`	Caption badge shown over the "after" image; hidden when empty.
`beforeAlt`	`string`	`'Before'`	Alt text for the "before" image.
`afterAlt`	`string`	`'After'`	Alt text for the "after" image.
`positionLabel`	`string`	—	Accessible label override for the range slider.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`number`	`50`	Divider position as a percentage (0-100); two-way bindable.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.