@vonage/vivid-react
Version:
Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings
87 lines (86 loc) • 5.23 kB
TypeScript
import React, { ReactNode, SyntheticEvent } from 'react';
/** Base class for range-slider
* For more info on this Vivid element please visit https://vivid.deno.dev/components/range-slider
* @param {string} start - The start value of the range.
* @param {| string
| undefined} initialStart - The initial start value. This value sets the `start` property
only when the `start` property has not been explicitly set. **attribute** `start`
* @param {string} currentStart - The current start value of the element. This property serves as a mechanism
to set the `start` property through both property assignment and the
.setAttribute() method. This is useful for setting the field's value
in UI libraries that bind data through the .setAttribute() API
and don't support IDL attribute binding. **attribute** `current-start`
* @param {number} startAsNumber - The start property, typed as a number.
* @param {string} end - The end value of the range.
* @param {string | undefined} initialEnd - The initial end value. This value sets the `end` property
only when the `end` property has not been explicitly set. **attribute** `end`
* @param {string} currentEnd - The current end value of the element. This property serves as a mechanism
to set the `end` property through both property assignment and the
.setAttribute() method. This is useful for setting the field's value
in UI libraries that bind data through the .setAttribute() API
and don't support IDL attribute binding. **attribute** `current-end`
* @param endAsNumber - The end property, typed as a number.
* @param {number} min - The minimum value of the range. **attribute** `min`
* @param {number} max - The maximum value of the range. **attribute** `max`
* @param {number} step - Value to increment or decrement via arrow keys, mouse click or drag. **attribute** `step`
* @param {Orientation} orientation - The orientation of the slider. **attribute** `orientation`
* @param {string | null} ariaStartLabel - Aria label for the start thumb **attribute** `aria-start-label`
* @param {string | null} ariaEndLabel - Aria label for the end thumb **attribute** `aria-end-label`
* @param {boolean} markers - Display markers on/off **attribute** `markers`
* @param {RangeSliderConnotation | undefined} connotation - The connotation of the component **attribute** `connotation`
* @param {boolean} pin - Show current values on the thumbs. **attribute** `pin`
* @param {(value: string) => string} valueTextFormatter - Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
* @param {string | undefined} label - The label for the form element. **attribute** `label`
* @param {string} value - The current value of the element. **attribute** `current-value`
* @param currentValue
* @param {string} initialValue - The default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. **attribute** `value`
* @param {boolean} disabled - Sets the element's disabled state. A disabled element will not be included during form submission. **attribute** `disabled`
* @param {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name. **attribute** `name`
* @param {boolean} required - Require the field to be completed prior to form submission. **attribute** `required`
* @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
* @param {string} componentName - Core component name, without prefix
*/
declare const VwcRangeSlider: {
(props: {
(event: SyntheticEvent): void;
(event: SyntheticEvent): void;
children?: ReactNode;
slot?: string | undefined;
id?: string | undefined;
style?: React.CSSProperties | undefined;
ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
onInput?: start | null;
onChange?: ((event: SyntheticEvent) => void) | undefined;
start?: string | undefined;
initialStart?: any;
currentStart?: string | undefined;
startAsNumber?: number | undefined;
end?: string | undefined;
initialEnd?: string | undefined;
currentEnd?: string | undefined;
endAsNumber?: any;
min?: number | undefined;
max?: number | undefined;
step?: number | undefined;
orientation?: any;
ariaStartLabel?: string | null | undefined;
ariaEndLabel?: string | null | undefined;
markers?: boolean | undefined;
connotation?: any;
pin?: boolean | undefined;
valueTextFormatter?: any;
label?: string | undefined;
value?: string | undefined;
currentValue?: any;
initialValue?: string | undefined;
disabled?: boolean | undefined;
name?: string | undefined;
required?: boolean | undefined;
VIVID_VERSION?: string | undefined;
componentName?: string | undefined;
}): JSX.Element;
displayName: string;
};
export default VwcRangeSlider;