@geoscene/common-components 5.0.19

package/dist/components/geoscene-slider/customElement.d.ts

@@ -0,0 +1,487 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { T9nMeta } from "@geoscene/lumina/controllers";
+import type { Popover as Popover } from "@geoscene/calcite-components/components/calcite-popover";
+
+/**
+ * The Slider component is used to filter data or collect numeric input from users. It supports single or multiple thumbs, configured via the
+ * [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#values) property. The Slider can be displayed in horizontal or vertical [layout](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#layout), supports snapping to defined [steps](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#steps),
+ * configurable value [precision](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#precision), and custom [labelFormatter](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#labelFormatter). It also includes keyboard interaction,
+ * optional editable labels, and customizable popover content.
+ *
+ * The slider component can be set up with the [geoscene-ticks](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/) component. See the example below:
+ * ```html
+ * <geoscene-slider min="0" max="100" show-range-labels value-labels-display="always" steps="1" value-labels-placement="start">
+ *   <geoscene-ticks interactive slot="content-end" style="flex:1;" min="0" max="100" mode="count" values="11" show-labels>
+ *   </geoscene-ticks>
+ * </geoscene-slider>
+ * ```
+ *
+ * ### Which slider should you use: geoscene-slider or calcite-slider?
+ * >
+ * > In general, use [calcite-slider](https://doc.geoscene.cn/calcite-design-system/components/slider/) over `geoscene-slider`.
+ * > It covers common slider use cases and works well in most scenarios.
+ * >
+ * > Use `geoscene-slider` only when you need functionality that `calcite-slider` does not provide, such as:
+ * > * [layout](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#layout): `geoscene-slider` supports `layout="vertical"`.
+ * > * Custom range display: `geoscene-slider` supports [fullRangeMin](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#fullRangeMin) and [fullRangeMax](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#fullRangeMax) for displaying a wider
+ * > range than the interactive range.
+ * > * More than two values: `geoscene-slider` supports an arbitrary number of slider values, beyond single-value or range (two-value) sliders.
+ * > * Slot support: Use the `content-start`, `content-end`, and `popover` slots to render custom content before the track, after the track, or inside the popover.
+ *
+ * @slot [content-start] - A slot for elements before the track.
+ * @slot [content-end] - A slot for elements after the track.
+ * @slot [popover] - A slot for custom content to be rendered in the popover.
+ * @since 5.0
+ */
+export abstract class GeosceneSlider extends LitElement {
+  /**
+   * The active value of the slider, based on which thumb or range (segment) is active. This returns the stored value for the active thumb,
+   * so it may reflect the thumb’s last set position.
+   *
+   *
+   * It returns
+   * - `undefined` when no value is active
+   * - a `number` when a single value is active
+   * - `"all"` when the range (segment) is active
+   *
+   * Listen to [@geosceneActiveValueChange](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#event-geosceneActiveValueChange) to be notified when a value becomes active or inactive.
+   *
+   * @see [@geosceneActiveValueChange](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#event-geosceneActiveValueChange)
+   */
+  get activeValue(): number | "all" | undefined;
+  /**
+   * When `true`, allows multiple thumbs to overlap by sharing the same value.
+   * When `false`, thumbs are prevented from overlapping.
+   *
+   * @default false
+   */
+  accessor allowValuesOverlap: boolean;
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Indicates whether the slider is disabled.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Controls where the filled segment is displayed on the track for single-thumb sliders.
+   * Range sliders always display the fill between the min and max thumbs.
+   *
+   * @default "start"
+   */
+  accessor fillPlacement: "end" | "none" | "start";
+  /**
+   * Sets the maximum value of the slider display full range.
+   * When specified, the slider track is scaled from [fullRangeMin](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#fullRangeMin) to `fullRangeMax`, while
+   * the thumbs remain constrained to the interactive range defined by [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) and [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max).
+   *
+   * The `fullRangeMax` must be greater than or equal to [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max) property of the slider.
+   *
+   * @see [fullRangeMin](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#fullRangeMin)
+   * @example
+   * ```html
+   * <!-- Slider with a full range from 0 to 100, while only allowing thumb values between 25 and 75. -->
+   * <geoscene-slider full-range-min="0" full-range-max="100" min="25" max="75" values="50"></geoscene-slider>
+   * ```
+   */
+  accessor fullRangeMax: number | undefined;
+  /**
+   * Sets the minimum value of the slider display full range.
+   * When specified, the slider track is scaled from `fullRangeMin` to [fullRangeMax](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#fullRangeMax), while
+   * the thumbs remain constrained to the range defined by [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) and [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max).
+   *
+   * The `fullRangeMin` must be less than or equal to [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) property of the slider.
+   *
+   * @see [fullRangeMax](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#fullRangeMax)
+   * @example
+   * ```html
+   * <!-- Slider with a full range from 0 to 100, while only allowing thumb values between 25 and 75. -->
+   * <geoscene-slider full-range-min="0" full-range-max="100" min="25" max="75" values="50"></geoscene-slider>
+   * ```
+   */
+  accessor fullRangeMin: number | undefined;
+  /**
+   * Controls how many "small" keyboard increments are applied in order to move a thumb or range faster using the
+   * keyboard. The following keys are considered "large" increment keys:
+   *
+   * - PageUp/PageDown
+   * - Shift + Arrow keys
+   *
+   * @default 10
+   * @internal
+   */
+  accessor keyboardLargeStep: number;
+  /**
+   * Allows customizing how slider labels are formatted for [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min), [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max), and thumb values.
+   * The formatted value is used for the visible labels and for the thumb’s accessible value text via `aria-valuetext`.
+   * Return `null` or `undefined` to use the default formatting.
+   *
+   * @example
+   * ```js
+   * // Format labels to use "K" for thousands and "M" for millions
+   * // and use "start" and "end" for min and max labels respectively.
+   * slider.labelFormatter = (value, type, defaultFormatter) => {
+   *   if (type === "min") return "start";
+   *   if (type === "max") return "end";
+   *   if (type !== "value") return defaultFormatter(value);
+   *
+   *   const abs = Math.abs(value);
+   *   if (abs >= 1_000_000) {
+   *     const num = (value / 1_000_000).toLocaleString(undefined, { maximumSignificantDigits: 3 });
+   *     return `${num} M`;
+   *   }
+   *
+   *   if (abs >= 1_000) {
+   *     const num = (value / 1_000).toLocaleString(undefined, { maximumSignificantDigits: 3 });
+   *     return `${num} K`;
+   *   }
+   *   return defaultFormatter(value);
+   * };
+   * ```
+   */
+  accessor labelFormatter: (value: number, type: "max" | "min" | "value", defaultFormatter: (value: number) => string) => string | null | undefined;
+  /**
+   * Determines the layout/orientation of the Slider component. By default, the slider will render horizontally with the min value on the left side
+   * of the track.
+   *
+   * @default "horizontal"
+   * @see [mirrored](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#mirrored)
+   */
+  accessor layout: "horizontal" | "vertical";
+  /**
+   * The maximum value for the slider thumbs. Thumbs will not move past this value.
+   *
+   * To display the `max` label on the slider, set [showRangeLabels](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#showRangeLabels) to `true`.
+   * To allow the end user to modify the `max` value, set [rangeLabelsEditingEnabled](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#rangeLabelsEditingEnabled) to `true`.
+   *
+   * @see [rangeLabelsEditingEnabled](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#rangeLabelsEditingEnabled)
+   * @see [showRangeLabels](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#showRangeLabels)
+   * @see [fullRangeMax](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#fullRangeMax)
+   */
+  accessor max: number;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      maximumValue?: string | undefined;
+      minimumValue?: string | undefined;
+      rangeMaximum?: string | undefined;
+      rangeMinimum?: string | undefined;
+      sliderValue?: string | undefined;
+  };
+  /** @internal */
+  protected messages: Partial<{
+      componentLabel: string;
+      maximumValue: string;
+      minimumValue: string;
+      rangeMaximum: string;
+      rangeMinimum: string;
+      sliderValue: string;
+  }> & T9nMeta<{
+      componentLabel: string;
+      maximumValue: string;
+      minimumValue: string;
+      rangeMaximum: string;
+      rangeMinimum: string;
+      sliderValue: string;
+  }>;
+  /**
+   * The minimum value for the slider thumbs. Thumbs will not move past this value.
+   * To display the `min` label on the slider, set [showRangeLabels](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#showRangeLabels) to `true`.
+   * To allow the end user to modify the `min` value, set [rangeLabelsEditingEnabled](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#rangeLabelsEditingEnabled) to `true`.
+   *
+   * @see [rangeLabelsEditingEnabled](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#rangeLabelsEditingEnabled)
+   * @see [showRangeLabels](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#showRangeLabels)
+   */
+  accessor min: number;
+  /**
+   * When `true`, the slider will display values from high to low. This inverts the direction of the slider.
+   *
+   * @default false
+   * @see [layout](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#layout)
+   */
+  accessor mirrored: boolean;
+  /**
+   * The accessible label for the popover. This label is used by assistive technologies and does not affect the visible UI.
+   *
+   * @default ""
+   * @see [Calcite popover](https://doc.geoscene.cn/calcite-design-system/components/popover/#api-reference-properties-label)
+   */
+  accessor popoverLabel: Popover["label"];
+  /**
+   * Determines which side of the track the popover is placed on.
+   * The popover is the floating container that displays the content from the `popover` slot.
+   * * `"start"`: Positions the popover above a horizontal slider or to the left of a vertical slider.
+   * * `"end"`: Positions the popover below a horizontal slider or to the right of a vertical slider.
+   *
+   * @default "start"
+   * @example
+   * ```js
+   * const slider = document.querySelector("geoscene-slider");
+   * slider.popoverPlacement = "end";
+   *
+   * // Example: Dynamic popover content based on slider value
+   * const popover = document.getElementById("popover");
+   * const unitCost = 12.5;
+   * const numberFormatter = new Intl.NumberFormat();
+   * const usd = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD" });
+   *
+   * const renderPopover = () => {
+   *   const value = Number(slider.values?.[0] ?? 0); // 0-100
+   *   const annualCost = (value / 100) * 800 * 365 * unitCost;
+   *   popover.textContent = `Est. annual cost: ${usd.format(annualCost)} (at ${numberFormatter.format(value)}%)`;
+   *   slider.popoverLabel = `Cost estimate ${usd.format(annualCost)} at ${numberFormatter.format(value)} percent`;
+   * };
+   *
+   * slider.addEventListener("geosceneInput", renderPopover);
+   * slider.addEventListener("geosceneChange", renderPopover);
+   * renderPopover();
+   * ```
+   */
+  accessor popoverPlacement: "end" | "start";
+  /**
+   * Defines how slider thumb values should be rounded. This number indicates the number
+   * of decimal places slider thumb _values_ should round to when they have been moved.
+   *
+   * This value also indicates the precision of thumb labels when the data range
+   * is less than `10` (i.e. `(max - min) < 10`).
+   *
+   * When the data range is larger than `10`, labels display with a precision of
+   * no more than two decimal places, though actual slider thumb values will maintain the
+   * precision specified in this property.
+   *
+   * For example, given the default precision of `4`, and the following slider configuration,
+   * The labels of the thumbs will display two decimal places, but the precision of the actual
+   * thumb values will not be lost even when the user slides or moves the thumb.
+   *
+   * Keep in mind this property rounds thumb [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#values) and shouldn't be used exclusively
+   * for formatting purposes. To format thumb `labels`, use the [labelFormatter](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#labelFormatter)
+   * property.
+   *
+   * @default 4
+   * @example
+   * ```html
+   * <!-- thumb label will display 50.43 -->
+   * <!-- thumb value will maintain precision, so value will remain at 50.4331 -->
+   * <geoscene-slider min="0" max="100" values="50.4331" precision="4"></geoscene-slider>
+   * ```
+   */
+  accessor precision: number;
+  /**
+   * When `true`, users can edit the [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) and [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max) range labels via keyboard input.
+   * Editing these labels updates the slider’s interactive range.
+   *
+   * @default false
+   */
+  accessor rangeLabelsEditingEnabled: boolean;
+  /**
+   * Controls where the [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) and [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max) range labels are positioned relative to the track.
+   * This property only affects the slider when [layout](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#layout) is `"horizontal"`.
+   *
+   * - `"center"` (default): Places the [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) and [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max) labels aligned with the track.
+   * - `"end"`: Places the range labels below the the track.
+   *
+   * @default "center"
+   */
+  accessor rangeLabelsPlacement: "center" | "end";
+  /**
+   * Indicates if the user can drag the segment between thumbs to update thumb positions.
+   *
+   * @default false
+   */
+  accessor segmentsDraggingDisabled: boolean;
+  /**
+   * Indicates whether to [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) and [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max) range labels are visible on the slider.
+   *
+   * @default false
+   */
+  accessor showRangeLabels: boolean;
+  /**
+   * Sets steps, or intervals, on the slider that restrict user
+   * input to specific values. If an array of numbers is passed to this
+   * property, the slider thumbs may only be moved to the positions
+   * specified in the array.
+   *
+   * If a single number is set, then steps are set along the entire
+   * slider range at an interval of the provided value. In this scenario,
+   * the user may only slide the thumbs to values at the provided interval.
+   * For example, if a value of `0.5` is set here, and the slider
+   * [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) is `0` and the slider [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max) is `10`, then the user will
+   * only be able to update the thumbs to values of 0, 0.5, 1.0, 1.5, 2.0, etc.
+   *
+   * @example
+   * ```html
+   * <!-- set steps at an interval of 0.5. So the -->
+   * <!-- slider thumb snaps at values of 0.5, 1.0, 1.5, etc. -->
+   * <geoscene-slider min="0" max="10" steps="0.5" values="5"></geoscene-slider>
+   * ```
+   * @example
+   * ```html
+   * <!-- Set steps at specific slider positions -->
+   * <geoscene-slider min="0" max="100" steps="5, 10, 15, 20, 25, 30, 35, 40" values="15, 30"></geoscene-slider>
+   * ```
+   */
+  accessor steps: number[] | number | undefined;
+  /**
+   * Controls when thumb value labels are displayed.
+   *
+   * This property can be set to one of the following values:
+   * - `"always"`: Always show the labels.
+   * - `"auto"`: Show the labels only when the thumb representing a value is dragged.
+   * - `"hidden"`: Never show the labels.
+   *
+   * @default "hidden"
+   */
+  accessor valueLabelsDisplay: "always" | "auto" | "hidden";
+  /**
+   * Indicates whether to enable editing input values via keyboard input
+   * when the user clicks a thumb value label. This allows the user to move the slider
+   * thumb to precise values without sliding the thumbs.
+   *
+   * ![Slider with editable labels](https://doc.geoscene.cn/javascript/5.0/assets/references/core/widgets/sliders/slider-edit-label.png)
+   *
+   * @default false
+   */
+  accessor valueLabelsEditingEnabled: boolean;
+  /**
+   * Determines whether the thumb value labels are placed before or after the track.
+   *
+   * @default "start"
+   */
+  accessor valueLabelsPlacement: "end" | "start";
+  /** An array of numbers representing absolute thumb positions on the slider. */
+  accessor values: number[];
+  /** Permanently destroys the component. */
+  destroy(): Promise<void>;
+  /**
+   * Fires when the [activeValue](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#activeValue) changes as a thumb or the range gains or loses focus.
+   * This event does not fire when [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#values) change. Use [@geosceneInput](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#event-geosceneInput) for continuous updates or
+   * [@geosceneChange](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#event-geosceneChange) when the interaction is committed.
+   *
+   * @example
+   * ```js
+   * // Display the active value status of the slider in a div element
+   * const slider = document.querySelector("geoscene-slider");
+   * const status = document.getElementById("slider-status");
+   *
+   * const renderActive = () => {
+   *   const active = slider.activeValue;
+   *   // active is: undefined (none), number (thumb value), or "all" (range segment)
+   *   status.textContent =
+   *     active === "all"
+   *       ? "Editing range"
+   *       : active == null
+   *         ? "No active thumb"
+   *         : `Editing value: ${active}`;
+   * };
+   *
+   * slider.addEventListener("geosceneActiveValueChange", renderActive);
+   * // Pair with these when you need value updates:
+   * slider.addEventListener("geosceneInput", () => console.log("values", slider.values));
+   * slider.addEventListener("geosceneChange", () => console.log("committed", slider.values));
+   *
+   * renderActive();
+   * ```
+   * @see [activeValue](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#activeValue)
+   */
+  readonly geosceneActiveValueChange: import("@geoscene/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires when the thumb or range is released on the component.
+   *
+   * Use [@geosceneInput](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#event-geosceneInput) for continuous updates during a drag.
+   *
+   * @example
+   * ```js
+   * const slider = document.querySelector("geoscene-slider");
+   * slider.popoverPlacement = "end";
+   *
+   * // Example: Dynamic popover content based on slider value
+   * const popover = document.getElementById("popover");
+   * const unitCost = 12.5;
+   * const numberFormatter = new Intl.NumberFormat();
+   * const usd = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD" });
+   *
+   * const renderPopover = () => {
+   *   const value = Number(slider.values?.[0] ?? 0); // 0-100
+   *   const annualCost = (value / 100) * 800 * 365 * unitCost;
+   *   popover.textContent = `Est. annual cost: ${usd.format(annualCost)} (at ${numberFormatter.format(value)}%)`;
+   *   slider.popoverLabel = `Cost estimate ${usd.format(annualCost)} at ${numberFormatter.format(value)} percent`;
+   * };
+   *
+   * slider.addEventListener("geosceneChange", renderPopover);
+   * renderPopover();
+   * ```
+   */
+  readonly geosceneChange: import("@geoscene/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires continuously while the thumb or range is being dragged.
+   * This event can fire frequently; consider debouncing or throttling expensive work.
+   *
+   * @example
+   * ```js
+   * import FeatureEffect from "@geoscene/core/layers/support/FeatureEffect";
+   * import FeatureFilter from "@geoscene/core/layers/support/FeatureFilter";
+   *
+   * slider.addEventListener("geosceneInput", () => {
+   *   const value = slider.values[0] ?? 0;
+   *   layer.featureEffect = new FeatureEffect({
+   *      filter: new FeatureFilter({
+   *        where: `FIELD <= ${value}`,
+   *      }),
+   *     includedEffect: "bloom(1.4, 0.2px, 0.1)",
+   *     excludedEffect: "opacity(20%) grayscale(100%)",
+   *   });
+   * });
+   * ```
+   */
+  readonly geosceneInput: import("@geoscene/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires when the slider's [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) and [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max) range changes.
+   * This occurs when the user edits the [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#min) or [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/#max) range labels (when enabled).
+   *
+   * @example
+   * ```js
+   * // Example: Keep a "budget" value inside the editable min/max range
+   * const slider = document.querySelector("geoscene-slider");
+   *
+   * const clamp = (val, min, max) => Math.min(max, Math.max(min, val));
+   *
+   * const render = () => {
+   *   rangeText.textContent = `Allowed: ${slider.min}–${slider.max}`;
+   *
+   *   // If your UI stores a single value, keep it inside the new range.
+   *   const current = Number(slider.values?.[0] ?? slider.min);
+   *   const next = clamp(current, slider.min, slider.max);
+   *
+   *   if (next !== current) {
+   *     slider.values = [next];
+   *   }
+   *
+   *   valueText.textContent = `Selected: ${next}`;
+   * };
+   *
+   * slider.addEventListener("geosceneRangeChange", render);
+   * render();
+   * ```
+   */
+  readonly geosceneRangeChange: import("@geoscene/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    geosceneActiveValueChange: GeosceneSlider["geosceneActiveValueChange"]["detail"];
+    geosceneChange: GeosceneSlider["geosceneChange"]["detail"];
+    geosceneInput: GeosceneSlider["geosceneInput"]["detail"];
+    geosceneRangeChange: GeosceneSlider["geosceneRangeChange"]["detail"];
+  };
+}