import { VNode } from 'vue'
import { ElementUIComponent } from './component'

export interface SliderTooltipFormat {
  /**
   * Format the displayed value of Slider
   *
   * @param value Value of the Slider
   * @returns formatted value
   */
  (value: number): string
}

/** Slider Component */
export declare class ElSlider extends ElementUIComponent {
  /** Current value of the slider */
  value: number | number[]

  /** Minimum value */
  min: number

  /** Maximum value */
  max: number

  /** Whether Slider is disabled */
  disabled: boolean

  /** Step size */
  step: number

  /** Whether to display an input box, works when range is false */
  showInput: boolean

  /** Format of displayed tooltip value */
  formatTooltip: SliderTooltipFormat

  /** Whether to display control buttons when show-input is true */
  showInputControls: boolean

  /** Size of the input box */
  inputSize: string

  /** Whether to display breakpoints */
  showStops: boolean

  /** Whether to display tooltip value */
  showTooltip: boolean

  /** Whether to select a range */
  range: boolean

  /** Vertical mode */
  vertical: boolean

  /** Slider height, required in vertical mode */
  height: boolean

  /** Debounce delay when typing, in milliseconds, works when show-input is true */
  debounce: number

  /** Custom class name for the tooltip */
  tooltipClass: string

  /** Custom marks */
  marks: {
    [key: number]: string | { style: Record<string, unknown>; label: string | VNode; }
  }
}