@aotearoan/neon/dist/src/components/user-input/range-slider/NeonRangeSlider.d.ts

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
/**
 *
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.
     */
    modelValue: {
        type: () => Array<number>;
        required: true;
    };
    /**
     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']
     */
    ids: {
        type: () => Array<string>;
        required: false;
    };
    /**
     * Slider color.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * Disable output display if set to false
     */
    output: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Disable legend if set to false
     */
    legend: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Disable tooltip if set to false
     */
    tooltip: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will
     * default to 0.01.
     */
    step: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * The rounding precision for display purposes
     */
    decimals: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the
     * format string. e.g. value = 90, ${value} => $90
     */
    valueTemplate: {
        type: StringConstructor;
        required: false;
    };
    /**
     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.
     */
    disableFormatting: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%
     */
    percentage: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
     */
    locale: {
        type: StringConstructor;
        default: null;
    };
    /**
     * The minimum range value
     */
    min: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).
     */
    max: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * Component disabled state.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * ARIA label for the lower bound slider.
     */
    lowerBoundLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * ARIA label for the upper bound slider.
     */
    upperBoundLabel: {
        type: StringConstructor;
        default: string;
    };
}>, {
    formattedValues: import("vue").ComputedRef<string[]>;
    changeLowerBound: (value: number) => void;
    changeUpperBound: (value: number) => void;
    emitValues: (values: number[]) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.
     */
    modelValue: {
        type: () => Array<number>;
        required: true;
    };
    /**
     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']
     */
    ids: {
        type: () => Array<string>;
        required: false;
    };
    /**
     * Slider color.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * Disable output display if set to false
     */
    output: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Disable legend if set to false
     */
    legend: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Disable tooltip if set to false
     */
    tooltip: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will
     * default to 0.01.
     */
    step: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * The rounding precision for display purposes
     */
    decimals: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the
     * format string. e.g. value = 90, ${value} => $90
     */
    valueTemplate: {
        type: StringConstructor;
        required: false;
    };
    /**
     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.
     */
    disableFormatting: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%
     */
    percentage: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
     */
    locale: {
        type: StringConstructor;
        default: null;
    };
    /**
     * The minimum range value
     */
    min: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).
     */
    max: {
        type: NumberConstructor;
        required: false;
    };
    /**
     * Component disabled state.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * ARIA label for the lower bound slider.
     */
    lowerBoundLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * ARIA label for the upper bound slider.
     */
    upperBoundLabel: {
        type: StringConstructor;
        default: string;
    };
}>> & Readonly<{
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
    color: NeonFunctionalColor;
    tooltip: boolean;
    disabled: boolean;
    legend: boolean;
    output: boolean;
    percentage: boolean;
    locale: string;
    min: number;
    disableFormatting: boolean;
    lowerBoundLabel: string;
    upperBoundLabel: string;
}, {}, {
    NeonSlider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        modelValue: {
            type: NumberConstructor;
            required: true;
        };
        id: {
            type: StringConstructor;
            required: false;
        };
        color: {
            type: () => NeonFunctionalColor;
            default: NeonFunctionalColor;
        };
        locale: {
            type: StringConstructor;
            default: null;
        };
        output: {
            type: BooleanConstructor;
            default: boolean;
        };
        legend: {
            type: BooleanConstructor;
            default: boolean;
        };
        tooltip: {
            type: BooleanConstructor;
            default: boolean;
        };
        percentage: {
            type: BooleanConstructor;
            default: boolean;
        };
        step: {
            type: NumberConstructor;
            required: false;
        };
        decimals: {
            type: NumberConstructor; /**
             * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%
             */
            required: false;
        };
        valueTemplate: {
            type: StringConstructor;
            required: false;
        };
        disableFormatting: {
            type: BooleanConstructor; /**
             * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).
             */
            default: boolean;
        };
        min: {
            type: NumberConstructor;
            default: number;
        };
        max: {
            type: NumberConstructor;
            required: false;
        };
        lowerBound: {
            type: NumberConstructor;
            /**
             * ARIA label for the upper bound slider.
             */
            required: false;
        };
        upperBound: {
            type: NumberConstructor;
            required: false;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        sanitizedAttributes: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        formattedMin: import("vue").ComputedRef<string | number>;
        formattedMax: import("vue").ComputedRef<string | number>;
        formattedValue: import("vue").ComputedRef<string | number>;
        computedMax: import("vue").ComputedRef<number>;
        computedStep: import("vue").ComputedRef<number>;
        changeValue: (event: Event) => void;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        modelValue: {
            type: NumberConstructor;
            required: true;
        };
        id: {
            type: StringConstructor;
            required: false;
        };
        color: {
            type: () => NeonFunctionalColor;
            default: NeonFunctionalColor;
        };
        locale: {
            type: StringConstructor;
            default: null;
        };
        output: {
            type: BooleanConstructor;
            default: boolean;
        };
        legend: {
            type: BooleanConstructor;
            default: boolean;
        };
        tooltip: {
            type: BooleanConstructor;
            default: boolean;
        };
        percentage: {
            type: BooleanConstructor;
            default: boolean;
        };
        step: {
            type: NumberConstructor;
            required: false;
        };
        decimals: {
            type: NumberConstructor; /**
             * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%
             */
            required: false;
        };
        valueTemplate: {
            type: StringConstructor;
            required: false;
        };
        disableFormatting: {
            type: BooleanConstructor; /**
             * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).
             */
            default: boolean;
        };
        min: {
            type: NumberConstructor;
            default: number;
        };
        max: {
            type: NumberConstructor;
            required: false;
        };
        lowerBound: {
            type: NumberConstructor;
            /**
             * ARIA label for the upper bound slider.
             */
            required: false;
        };
        upperBound: {
            type: NumberConstructor;
            required: false;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{
        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
    }>, {
        color: NeonFunctionalColor;
        tooltip: boolean;
        disabled: boolean;
        legend: boolean;
        output: boolean;
        percentage: boolean;
        locale: string;
        min: number;
        disableFormatting: boolean;
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;