range.d.ts 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. import { AfterContentInit, ChangeDetectorRef, ElementRef, OnDestroy, Renderer } from '@angular/core';
  2. import { ControlValueAccessor } from '@angular/forms';
  3. import { Config } from '../../config/config';
  4. import { DomController } from '../../platform/dom-controller';
  5. import { Form } from '../../util/form';
  6. import { Haptic } from '../../tap-click/haptic';
  7. import { BaseInput } from '../../util/base-input';
  8. import { Item } from '../item/item';
  9. import { Platform } from '../../platform/platform';
  10. import { PointerCoordinates } from '../../util/dom';
  11. import { UIEventManager } from '../../gestures/ui-event-manager';
  12. /**
  13. * @name Range
  14. * @description
  15. * The Range slider lets users select from a range of values by moving
  16. * the slider knob. It can accept dual knobs, but by default one knob
  17. * controls the value of the range.
  18. *
  19. * ### Range Labels
  20. * Labels can be placed on either side of the range by adding the
  21. * `range-left` or `range-right` property to the element. The element
  22. * doesn't have to be an `ion-label`, it can be added to any element
  23. * to place it to the left or right of the range. See [usage](#usage)
  24. * below for examples.
  25. *
  26. *
  27. * ### Minimum and Maximum Values
  28. * Minimum and maximum values can be passed to the range through the `min`
  29. * and `max` properties, respectively. By default, the range sets the `min`
  30. * to `0` and the `max` to `100`.
  31. *
  32. *
  33. * ### Steps and Snaps
  34. * The `step` property specifies the value granularity of the range's value.
  35. * It can be useful to set the `step` when the value isn't in increments of `1`.
  36. * Setting the `step` property will show tick marks on the range for each step.
  37. * The `snaps` property can be set to automatically move the knob to the nearest
  38. * tick mark based on the step property value.
  39. *
  40. *
  41. * ### Dual Knobs
  42. * Setting the `dualKnobs` property to `true` on the range component will
  43. * enable two knobs on the range. If the range has two knobs, the value will
  44. * be an object containing two properties: `lower` and `upper`.
  45. *
  46. *
  47. * @usage
  48. * ```html
  49. * <ion-list>
  50. * <ion-item>
  51. * <ion-range [(ngModel)]="singleValue" color="danger" pin="true"></ion-range>
  52. * </ion-item>
  53. *
  54. * <ion-item>
  55. * <ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary">
  56. * <ion-label range-left>-200</ion-label>
  57. * <ion-label range-right>200</ion-label>
  58. * </ion-range>
  59. * </ion-item>
  60. *
  61. * <ion-item>
  62. * <ion-range min="20" max="80" step="2" [(ngModel)]="brightness">
  63. * <ion-icon small range-left name="sunny"></ion-icon>
  64. * <ion-icon range-right name="sunny"></ion-icon>
  65. * </ion-range>
  66. * </ion-item>
  67. *
  68. * <ion-item>
  69. * <ion-label>step=100, snaps, {{singleValue4}}</ion-label>
  70. * <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary" [(ngModel)]="singleValue4"></ion-range>
  71. * </ion-item>
  72. *
  73. * <ion-item>
  74. * <ion-label>dual, step=3, snaps, {{dualValue2 | json}}</ion-label>
  75. * <ion-range dualKnobs="true" [(ngModel)]="dualValue2" min="21" max="72" step="3" snaps="true"></ion-range>
  76. * </ion-item>
  77. * </ion-list>
  78. * ```
  79. *
  80. *
  81. * @demo /docs/demos/src/range/
  82. */
  83. export declare class Range extends BaseInput<any> implements AfterContentInit, ControlValueAccessor, OnDestroy {
  84. private _haptic;
  85. private _plt;
  86. private _dom;
  87. private _cd;
  88. _dual: boolean;
  89. _pin: boolean;
  90. _pressed: boolean;
  91. _activeB: boolean;
  92. _rect: ClientRect;
  93. _ticks: any[];
  94. _min: number;
  95. _max: number;
  96. _step: number;
  97. _snaps: boolean;
  98. _valA: number;
  99. _valB: number;
  100. _ratioA: number;
  101. _ratioB: number;
  102. _pressedA: boolean;
  103. _pressedB: boolean;
  104. _barL: string;
  105. _barR: string;
  106. _events: UIEventManager;
  107. _slider: ElementRef;
  108. /**
  109. * @input {number} Minimum integer value of the range. Defaults to `0`.
  110. */
  111. min: number;
  112. /**
  113. * @input {number} Maximum integer value of the range. Defaults to `100`.
  114. */
  115. max: number;
  116. /**
  117. * @input {number} Specifies the value granularity. Defaults to `1`.
  118. */
  119. step: number;
  120. /**
  121. * @input {boolean} If true, the knob snaps to tick marks evenly spaced based
  122. * on the step property value. Defaults to `false`.
  123. */
  124. snaps: boolean;
  125. /**
  126. * @input {boolean} If true, a pin with integer value is shown when the knob
  127. * is pressed. Defaults to `false`.
  128. */
  129. pin: boolean;
  130. /**
  131. * @input {number} How long, in milliseconds, to wait to trigger the
  132. * `ionChange` event after each change in the range value. Default `0`.
  133. */
  134. debounce: number;
  135. /**
  136. * @input {boolean} Show two knobs. Defaults to `false`.
  137. */
  138. dualKnobs: boolean;
  139. /**
  140. * Returns the ratio of the knob's is current location, which is a number
  141. * between `0` and `1`. If two knobs are used, this property represents
  142. * the lower value.
  143. */
  144. readonly ratio: number;
  145. /**
  146. * Returns the ratio of the upper value's is current location, which is
  147. * a number between `0` and `1`. If there is only one knob, then this
  148. * will return `null`.
  149. */
  150. readonly ratioUpper: number;
  151. constructor(form: Form, _haptic: Haptic, item: Item, config: Config, _plt: Platform, elementRef: ElementRef, renderer: Renderer, _dom: DomController, _cd: ChangeDetectorRef);
  152. /**
  153. * @hidden
  154. */
  155. ngAfterContentInit(): void;
  156. /** @internal */
  157. _pointerDown(ev: UIEvent): boolean;
  158. /** @internal */
  159. _pointerMove(ev: UIEvent): void;
  160. /** @internal */
  161. _pointerUp(ev: UIEvent): void;
  162. /** @internal */
  163. _update(current: PointerCoordinates, rect: ClientRect, isPressed: boolean): boolean;
  164. /** @internal */
  165. _updateBar(): void;
  166. /** @internal */
  167. _createTicks(): void;
  168. /** @internal */
  169. _updateTicks(): void;
  170. /** @hidden */
  171. _keyChg(isIncrease: boolean, isKnobB: boolean): void;
  172. /** @internal */
  173. _ratioToValue(ratio: number): number;
  174. /** @internal */
  175. _valueToRatio(value: number): number;
  176. _inputNormalize(val: any): any;
  177. /**
  178. * @hidden
  179. */
  180. _inputUpdated(): void;
  181. /**
  182. * @hidden
  183. */
  184. ngOnDestroy(): void;
  185. }