@synergy-design-system/vue/dist/components/SynVueRange.vue.d.ts

Vue3 wrappers for the Synergy Design System

import { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent } from '@synergy-design-system/components';
import { default as SynRange } from '@synergy-design-system/components/components/range/range.component.js';
export type { SynBlurEvent } from '@synergy-design-system/components';
export type { SynChangeEvent } from '@synergy-design-system/components';
export type { SynFocusEvent } from '@synergy-design-system/components';
export type { SynInputEvent } from '@synergy-design-system/components';
export type { SynInvalidEvent } from '@synergy-design-system/components';
export type { SynMoveEvent } from '@synergy-design-system/components';
declare const _default: typeof __VLS_export;
export default _default;
declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
    /**
     * The name of the range, submitted as a name/value pair with form data.
     */
    name?: SynRange["name"];
    /**
     * The range's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    label?: SynRange["label"];
    /**
     * The range's help text.
     * If you need to display HTML, use the help-text slot instead.
     */
    helpText?: SynRange["helpText"];
    /**
     * Disables the range.
     */
    disabled?: SynRange["disabled"];
    /**
     * Sets the range to a readonly state.
     */
    readonly?: SynRange["readonly"];
    /**
     * The minimum acceptable value of the range.
     */
    min?: SynRange["min"];
    /**
     * The maximum acceptable value of the range.
     */
    max?: SynRange["max"];
    /**
     * The interval at which the range will increase and decrease.
     */
    step?: SynRange["step"];
    /**
     * The range's size.
     */
    size?: SynRange["size"];
    /**
     * The preferred placement of the range's tooltip.
     * Use "none" to disable the tooltip
     */
    tooltipPlacement?: SynRange["tooltipPlacement"];
    /**
     * The current values of the input (in ascending order) as a string of space separated values
     */
    value?: SynRange["value"];
    /**
  * Set to true to restrict the movement of a thumb to its next and previous thumb.
  This only affects multi range components
   */
    restrictMovement?: SynRange["restrictMovement"];
    /**
  * By default, form controls are associated with the nearest containing `<form>` element.
  This attribute allows you to place the form control outside of a form
  and associate it with the form that has this `id`.
  The form must be in the same document or shadow root for this to work.
   */
    form?: SynRange["form"];
    /**
  * A function used to format the tooltip's value.
  The value of the thumb is passed as the only argument.
  The function should return a string to display in the tooltip.
   */
    tooltipFormatter?: SynRange["tooltipFormatter"];
    /**
     * Support for two way data binding
     */
    modelValue?: SynRange["value"];
}, {
    nativeElement: import('vue').Ref<SynRange | undefined, SynRange | undefined>;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    "syn-blur": (e: SynBlurEvent) => any;
    "syn-focus": (e: SynFocusEvent) => any;
    "syn-invalid": (e: SynInvalidEvent) => any;
    "syn-change": (e: SynChangeEvent) => any;
    "syn-input": (e: SynInputEvent) => any;
    "update:modelValue": (newValue: string | null) => any;
    "syn-move": (e: SynMoveEvent) => any;
}, string, import('vue').PublicProps, Readonly<{
    /**
     * The name of the range, submitted as a name/value pair with form data.
     */
    name?: SynRange["name"];
    /**
     * The range's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    label?: SynRange["label"];
    /**
     * The range's help text.
     * If you need to display HTML, use the help-text slot instead.
     */
    helpText?: SynRange["helpText"];
    /**
     * Disables the range.
     */
    disabled?: SynRange["disabled"];
    /**
     * Sets the range to a readonly state.
     */
    readonly?: SynRange["readonly"];
    /**
     * The minimum acceptable value of the range.
     */
    min?: SynRange["min"];
    /**
     * The maximum acceptable value of the range.
     */
    max?: SynRange["max"];
    /**
     * The interval at which the range will increase and decrease.
     */
    step?: SynRange["step"];
    /**
     * The range's size.
     */
    size?: SynRange["size"];
    /**
     * The preferred placement of the range's tooltip.
     * Use "none" to disable the tooltip
     */
    tooltipPlacement?: SynRange["tooltipPlacement"];
    /**
     * The current values of the input (in ascending order) as a string of space separated values
     */
    value?: SynRange["value"];
    /**
  * Set to true to restrict the movement of a thumb to its next and previous thumb.
  This only affects multi range components
   */
    restrictMovement?: SynRange["restrictMovement"];
    /**
  * By default, form controls are associated with the nearest containing `<form>` element.
  This attribute allows you to place the form control outside of a form
  and associate it with the form that has this `id`.
  The form must be in the same document or shadow root for this to work.
   */
    form?: SynRange["form"];
    /**
  * A function used to format the tooltip's value.
  The value of the thumb is passed as the only argument.
  The function should return a string to display in the tooltip.
   */
    tooltipFormatter?: SynRange["tooltipFormatter"];
    /**
     * Support for two way data binding
     */
    modelValue?: SynRange["value"];
}> & Readonly<{
    "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
    "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
    "onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
    "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
    "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
    "onUpdate:modelValue"?: ((newValue: string | null) => any) | undefined;
    "onSyn-move"?: ((e: SynMoveEvent) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
    default?: (props: {}) => any;
}>;
type __VLS_WithSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};