import { type Snippet } from 'svelte';
import type { ContainerWidth } from '../@types/global';
interface Props {
    /** Width of the chart within the text well. Options: wide, wider, widest, fluid */
    width?: ContainerWidth;
    /** Height of the component */
    height?: number;
    /**
     * If set, makes the height a ratio of the component's width.
     */
    heightRatio?: number;
    /**
     * Before image source
     */
    beforeSrc: string;
    /**
     * Before image altText
     */
    beforeAlt: string;
    /**
     * After image source
     */
    afterSrc: string;
    /**
     * After image altText
     */
    afterAlt: string;
    /**
     * Class to target with SCSS.
     */
    class?: string;
    /** Drag handle colour */
    handleColour?: string;
    /** Drag handle opacity */
    handleInactiveOpacity?: number;
    /** Margin at the edge of the image to stop dragging */
    handleMargin?: number;
    /** Percentage of the component width the handle will travel ona key press */
    keyPressStep?: number;
    /** Initial offset of the handle, between 0 and 1. */
    offset?: number;
    /** ID to target with SCSS. */
    id?: string;
    /**
     * Optional snippet for a custom overlay for the before image.
     */
    beforeOverlay?: Snippet;
    /**
     * Optional snippet for a custom overlay for the after image.
     */
    afterOverlay?: Snippet;
    /**
     * Optional snippet for a custom caption.
     */
    caption?: Snippet;
    /** Custom ARIA label language to label the component. */
    ariaLabel?: string;
}
/**
 * An image-comparison slider with a draggable, keyboard-accessible handle for revealing a before/after image pair.
 *
 * [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-beforeafter--docs)
 */
declare const BeforeAfter: import("svelte").Component<Props, {}, "">;
type BeforeAfter = ReturnType<typeof BeforeAfter>;
export default BeforeAfter;