@limetech/lime-elements
Version:
95 lines • 2.76 kB
TypeScript
/**
* @exampleComponent limel-example-slider-basic
* @exampleComponent limel-example-slider-multiplier
* @exampleComponent limel-example-slider-multiplier-percentage-colors
* @exampleComponent limel-example-slider-unit
* @exampleComponent limel-example-slider-composite
*/
export declare class Slider {
/**
* Disables the slider when `true`,
* and visually shows that the field is editable but disabled.
* This tells the users that if certain requirements are met,
* the slider may become interactable.
*/
disabled: boolean;
/**
* Disables the slider when `true`. This visualizes the slider slightly differently.
* But shows no visual sign indicating that the slider field
* is disabled or can ever become interactable.
*/
readonly: boolean;
/**
* Default value: 1.
* The factor that the properties `value`, `valuemax`, `valuemin`, and
* `step` are multiplied by. On `change` divides the value by the factor,
* so the original format stays the same.
*/
factor: number;
/**
* Label to display next to the input
*/
label: string;
/**
* Optional helper text to display below the slider
*/
helperText: string;
/**
* Set to `true` to indicate that the slider is required.
*/
required: boolean;
/**
* Set to `true` to indicate that the current value of the slider is invalid.
*/
invalid: boolean;
/**
* Set to `true` to display percentage-based colors on the slider.
* The colors change in intervals of 10% as the value changes,
* creating a color spectrum from red (low) → orange → yellow → green → teal (high).
*/
displaysPercentageColors: boolean;
/**
* Unit to display next to the value
*/
unit: string;
/**
* The value of the input
*/
value: number;
/**
* The maximum value allowed
*/
valuemax: number;
/**
* The minimum value allowed
*/
valuemin: number;
/**
* The stepping interval to use when adjusting the value
*/
step: number;
/**
* Emitted when the value has been changed
*/
private change;
private percentageClass;
private displayValue;
private labelId;
private helperTextId;
constructor();
componentWillLoad(): void;
render(): any;
protected watchValue(): void;
private renderStepDots;
private renderHelperLine;
private handleInput;
private handleChange;
private getContainerClassList;
private multiplyByFactor;
private getValue;
private getFraction;
private setPercentageClass;
private isMultipleOfStep;
private roundToStep;
}
//# sourceMappingURL=slider.d.ts.map