/**
 * `<range-ui>` — Range track with click-to-jump + drag.
 *
 * @see https://ui-kit.exe.xyz/site/components/range
 */

import { UIFormElement } from '../../core/form.js';

export interface RangeChangeEventDetail {
  value: number;
}
export type RangeChangeEvent = CustomEvent<RangeChangeEventDetail>;
export type RangeInputEvent = CustomEvent<RangeChangeEventDetail>;

export class UIRange extends UIFormElement {
  /** Numeric value — overrides UIFormElement.value (which is String). */
  value: number;
  min: number;
  max: number;
  step: number;
  label: string;
  suffix: string;

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UIRange, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'change', listener: (ev: RangeChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
  addEventListener(type: 'input', listener: (ev: RangeInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}
