slider.d.ts 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { FocusMonitor } from '@angular/cdk/a11y';
  9. import { Directionality } from '@angular/cdk/bidi';
  10. import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
  11. import { ControlValueAccessor } from '@angular/forms';
  12. import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, HammerInput, HasTabIndex, HasTabIndexCtor } from '@angular/material/core';
  13. /**
  14. * Provider Expression that allows mat-slider to register as a ControlValueAccessor.
  15. * This allows it to support [(ngModel)] and [formControl].
  16. * @docs-private
  17. */
  18. export declare const MAT_SLIDER_VALUE_ACCESSOR: any;
  19. /** A simple change event emitted by the MatSlider component. */
  20. export declare class MatSliderChange {
  21. /** The MatSlider that changed. */
  22. source: MatSlider;
  23. /** The new value of the source slider. */
  24. value: number | null;
  25. }
  26. /** @docs-private */
  27. declare class MatSliderBase {
  28. _elementRef: ElementRef;
  29. constructor(_elementRef: ElementRef);
  30. }
  31. declare const _MatSliderMixinBase: HasTabIndexCtor & CanColorCtor & CanDisableCtor & typeof MatSliderBase;
  32. /**
  33. * Allows users to select from a range of values by moving the slider thumb. It is similar in
  34. * behavior to the native `<input type="range">` element.
  35. */
  36. export declare class MatSlider extends _MatSliderMixinBase implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, OnInit, HasTabIndex {
  37. private _focusMonitor;
  38. private _changeDetectorRef;
  39. private _dir;
  40. _animationMode?: string | undefined;
  41. /** Whether the slider is inverted. */
  42. invert: boolean;
  43. private _invert;
  44. /** The maximum value that the slider can have. */
  45. max: number;
  46. private _max;
  47. /** The minimum value that the slider can have. */
  48. min: number;
  49. private _min;
  50. /** The values at which the thumb will snap. */
  51. step: number;
  52. private _step;
  53. /** Whether or not to show the thumb label. */
  54. thumbLabel: boolean;
  55. private _thumbLabel;
  56. /**
  57. * How often to show ticks. Relative to the step so that a tick always appears on a step.
  58. * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
  59. */
  60. tickInterval: 'auto' | number;
  61. private _tickInterval;
  62. /** Value of the slider. */
  63. value: number | null;
  64. private _value;
  65. /**
  66. * Function that will be used to format the value before it is displayed
  67. * in the thumb label. Can be used to format very large number in order
  68. * for them to fit into the slider thumb.
  69. */
  70. displayWith: (value: number | null) => string | number;
  71. /** Whether the slider is vertical. */
  72. vertical: boolean;
  73. private _vertical;
  74. /** Event emitted when the slider value has changed. */
  75. readonly change: EventEmitter<MatSliderChange>;
  76. /** Event emitted when the slider thumb moves. */
  77. readonly input: EventEmitter<MatSliderChange>;
  78. /**
  79. * Emits when the raw value of the slider changes. This is here primarily
  80. * to facilitate the two-way binding for the `value` input.
  81. * @docs-private
  82. */
  83. readonly valueChange: EventEmitter<number | null>;
  84. /** The value to be used for display purposes. */
  85. readonly displayValue: string | number;
  86. /** set focus to the host element */
  87. focus(options?: FocusOptions): void;
  88. /** blur the host element */
  89. blur(): void;
  90. /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
  91. onTouched: () => any;
  92. /** The percentage of the slider that coincides with the value. */
  93. readonly percent: number;
  94. private _percent;
  95. /**
  96. * Whether or not the thumb is sliding.
  97. * Used to determine if there should be a transition for the thumb and fill track.
  98. */
  99. _isSliding: boolean;
  100. /**
  101. * Whether or not the slider is active (clicked or sliding).
  102. * Used to shrink and grow the thumb as according to the Material Design spec.
  103. */
  104. _isActive: boolean;
  105. /**
  106. * Whether the axis of the slider is inverted.
  107. * (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).
  108. */
  109. readonly _invertAxis: boolean;
  110. /** Whether the slider is at its minimum value. */
  111. readonly _isMinValue: boolean;
  112. /**
  113. * The amount of space to leave between the slider thumb and the track fill & track background
  114. * elements.
  115. */
  116. readonly _thumbGap: 7 | 10 | 0;
  117. /** CSS styles for the track background element. */
  118. readonly _trackBackgroundStyles: {
  119. [key: string]: string;
  120. };
  121. /** CSS styles for the track fill element. */
  122. readonly _trackFillStyles: {
  123. [key: string]: string;
  124. };
  125. /** CSS styles for the ticks container element. */
  126. readonly _ticksContainerStyles: {
  127. [key: string]: string;
  128. };
  129. /** CSS styles for the ticks element. */
  130. readonly _ticksStyles: {
  131. [key: string]: string;
  132. };
  133. readonly _thumbContainerStyles: {
  134. [key: string]: string;
  135. };
  136. /** The size of a tick interval as a percentage of the size of the track. */
  137. private _tickIntervalPercent;
  138. /** The dimensions of the slider. */
  139. private _sliderDimensions;
  140. private _controlValueAccessorChangeFn;
  141. /** Decimal places to round to, based on the step amount. */
  142. private _roundToDecimal;
  143. /** Subscription to the Directionality change EventEmitter. */
  144. private _dirChangeSubscription;
  145. /** The value of the slider when the slide start event fires. */
  146. private _valueOnSlideStart;
  147. /** Reference to the inner slider wrapper element. */
  148. private _sliderWrapper;
  149. /**
  150. * Whether mouse events should be converted to a slider position by calculating their distance
  151. * from the right or bottom edge of the slider as opposed to the top or left.
  152. */
  153. private _shouldInvertMouseCoords;
  154. /** The language direction for this slider element. */
  155. private _getDirection;
  156. constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, tabIndex: string, _animationMode?: string | undefined);
  157. ngOnInit(): void;
  158. ngOnDestroy(): void;
  159. _onMouseenter(): void;
  160. _onMousedown(event: MouseEvent): void;
  161. _onSlide(event: HammerInput): void;
  162. _onSlideStart(event: HammerInput | null): void;
  163. _onSlideEnd(): void;
  164. _onFocus(): void;
  165. _onBlur(): void;
  166. _onKeydown(event: KeyboardEvent): void;
  167. _onKeyup(): void;
  168. /** Increments the slider by the given number of steps (negative number decrements). */
  169. private _increment;
  170. /** Calculate the new value from the new physical location. The value will always be snapped. */
  171. private _updateValueFromPosition;
  172. /** Emits a change event if the current value is different from the last emitted value. */
  173. private _emitChangeEvent;
  174. /** Emits an input event when the current value is different from the last emitted value. */
  175. private _emitInputEvent;
  176. /** Updates the amount of space between ticks as a percentage of the width of the slider. */
  177. private _updateTickIntervalPercent;
  178. /** Creates a slider change object from the specified value. */
  179. private _createChangeEvent;
  180. /** Calculates the percentage of the slider that a value is. */
  181. private _calculatePercentage;
  182. /** Calculates the value a percentage of the slider corresponds to. */
  183. private _calculateValue;
  184. /** Return a number between two numbers. */
  185. private _clamp;
  186. /**
  187. * Get the bounding client rect of the slider track element.
  188. * The track is used rather than the native element to ignore the extra space that the thumb can
  189. * take up.
  190. */
  191. private _getSliderDimensions;
  192. /**
  193. * Focuses the native element.
  194. * Currently only used to allow a blur event to fire but will be used with keyboard input later.
  195. */
  196. private _focusHostElement;
  197. /** Blurs the native element. */
  198. private _blurHostElement;
  199. /**
  200. * Sets the model value. Implemented as part of ControlValueAccessor.
  201. * @param value
  202. */
  203. writeValue(value: any): void;
  204. /**
  205. * Registers a callback to be triggered when the value has changed.
  206. * Implemented as part of ControlValueAccessor.
  207. * @param fn Callback to be registered.
  208. */
  209. registerOnChange(fn: (value: any) => void): void;
  210. /**
  211. * Registers a callback to be triggered when the component is touched.
  212. * Implemented as part of ControlValueAccessor.
  213. * @param fn Callback to be registered.
  214. */
  215. registerOnTouched(fn: any): void;
  216. /**
  217. * Sets whether the component should be disabled.
  218. * Implemented as part of ControlValueAccessor.
  219. * @param isDisabled
  220. */
  221. setDisabledState(isDisabled: boolean): void;
  222. }
  223. export {};