@coreui/vue-pro
Version:
UI Components Library for Vue.js
242 lines (241 loc) • 9.9 kB
TypeScript
import { PropType, VNode } from 'vue';
import type { Label } from './types';
declare const CRangeSlider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Enable or disable clickable labels in the Vue Range Slider.
* When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
*/
clickableLabels: {
type: BooleanConstructor;
default: boolean;
};
/**
* Control the interactive state of the Vue Range Slider with the `disabled` prop.
* Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Define the minimum distance between slider handles using the `distance` prop in the Vue Range Slider.
* This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.
*/
distance: {
type: NumberConstructor;
default: number;
};
/**
* Add descriptive labels to your Vue Range Slider by providing an array of `labels`.
* These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.
*/
labels: {
type: PropType<Label[]>;
default: () => never[];
};
/**
* Specify the maximum value for the Vue Range Slider with the `max` prop.
* This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.
*/
max: {
type: NumberConstructor;
default: number;
};
/**
* Set the minimum value for the Vue Range Slider using the `min` prop.
* This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.
*/
min: {
type: NumberConstructor;
default: number;
};
/**
* The default name for a value passed using v-model.
*/
modelValue: PropType<number | number[]>;
/**
* Assign a `name` to the Vue Range Slider for form integration.
* Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.
*/
name: {
type: PropType<string | string[]>;
default: string;
};
/**
* Control the granularity of the Vue Range Slider by setting the `step` prop.
* This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.
*/
step: {
type: NumberConstructor;
default: number;
};
/**
* Toggle the visibility of tooltips in the Vue Range Slider with the `tooltips` prop.
* When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.
*/
tooltips: {
type: BooleanConstructor;
default: boolean;
};
/**
* Customize the display format of tooltips in the Vue Range Slider using the `tooltipsFormat` function.
* This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.
*/
tooltipsFormat: {
type: PropType<(value: number) => string | VNode>;
default: null;
};
/**
* Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track.
*/
track: {
type: (StringConstructor | BooleanConstructor)[];
default: string;
validator: (value: boolean | string) => value is boolean | "fill";
};
/**
* Set the current value(s) of the Vue Range Slider using the `value` prop.
* Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.
*/
value: {
type: PropType<number | number[]>;
default: () => number[];
};
/**
* Orient the Vue Range Slider vertically by setting the `vertical` prop to `true`.
* This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.
*/
vertical: {
type: BooleanConstructor;
default: boolean;
};
}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Enable or disable clickable labels in the Vue Range Slider.
* When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
*/
clickableLabels: {
type: BooleanConstructor;
default: boolean;
};
/**
* Control the interactive state of the Vue Range Slider with the `disabled` prop.
* Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Define the minimum distance between slider handles using the `distance` prop in the Vue Range Slider.
* This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.
*/
distance: {
type: NumberConstructor;
default: number;
};
/**
* Add descriptive labels to your Vue Range Slider by providing an array of `labels`.
* These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.
*/
labels: {
type: PropType<Label[]>;
default: () => never[];
};
/**
* Specify the maximum value for the Vue Range Slider with the `max` prop.
* This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.
*/
max: {
type: NumberConstructor;
default: number;
};
/**
* Set the minimum value for the Vue Range Slider using the `min` prop.
* This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.
*/
min: {
type: NumberConstructor;
default: number;
};
/**
* The default name for a value passed using v-model.
*/
modelValue: PropType<number | number[]>;
/**
* Assign a `name` to the Vue Range Slider for form integration.
* Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.
*/
name: {
type: PropType<string | string[]>;
default: string;
};
/**
* Control the granularity of the Vue Range Slider by setting the `step` prop.
* This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.
*/
step: {
type: NumberConstructor;
default: number;
};
/**
* Toggle the visibility of tooltips in the Vue Range Slider with the `tooltips` prop.
* When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.
*/
tooltips: {
type: BooleanConstructor;
default: boolean;
};
/**
* Customize the display format of tooltips in the Vue Range Slider using the `tooltipsFormat` function.
* This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.
*/
tooltipsFormat: {
type: PropType<(value: number) => string | VNode>;
default: null;
};
/**
* Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track.
*/
track: {
type: (StringConstructor | BooleanConstructor)[];
default: string;
validator: (value: boolean | string) => value is boolean | "fill";
};
/**
* Set the current value(s) of the Vue Range Slider using the `value` prop.
* Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.
*/
value: {
type: PropType<number | number[]>;
default: () => number[];
};
/**
* Orient the Vue Range Slider vertically by setting the `vertical` prop to `true`.
* This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.
*/
vertical: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onChange?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
name: string | string[];
track: string | boolean;
value: number | number[];
disabled: boolean;
vertical: boolean;
max: number;
min: number;
clickableLabels: boolean;
distance: number;
labels: Label[];
step: number;
tooltips: boolean;
tooltipsFormat: (value: number) => string | VNode;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export { CRangeSlider };