HoopsCoordinateInputElement

class ui.common.HoopsCoordinateInputElement()

A custom web component that provides a coordinate input interface with both numeric input and range slider controls for editing coordinate values.

This component renders a labeled input control that consists of:

  • A text label
  • A numeric input field
  • A range slider

Both input controls are kept in sync and allow users to modify coordinate values either by typing precise values or using the slider for approximate adjustments.

Index

Constructors

Properties

Methods

Constructors

ui.common.HoopsCoordinateInputElement.constructor()
HoopsCoordinateInputElement(): HoopsCoordinateInputElement

Constructs a new HoopsCoordinateInputElement with default values.

Initializes the component with:

  • Empty label
  • Value of 0
  • Min value of 0
  • Max value of 100

Returns: HoopsCoordinateInputElement

Properties

ui.common.HoopsCoordinateInputElement.styles

static

styles: CSSResult[]

Array of styles to apply to the element. The styles should be defined using the ? tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
ui.common.HoopsCoordinateInputElement.label
label: string

The display label for this coordinate input (e.g., “X”, “Y”, “Z”). This label appears before the input controls and is also included in the change event details.

ui.common.HoopsCoordinateInputElement.max
max: number

The maximum allowed value for the coordinate. This constrains both the numeric input and range slider.

ui.common.HoopsCoordinateInputElement.min
min: number

The minimum allowed value for the coordinate. This constrains both the numeric input and range slider.

ui.common.HoopsCoordinateInputElement.value
value: number

The current numeric value of the coordinate. This value is displayed in both the numeric input and range slider, and is formatted to 2 decimal places for display.

Methods

ui.common.HoopsCoordinateInputElement.render()
render(): TemplateResult

Renders the coordinate input component template.

Creates a layout with three columns:

  1. Label (1rem width)
  2. Numeric input (4rem width)
  3. Range slider (auto width)

Both input controls share the same value, constraints, and change handler to ensure they remain synchronized.

Returns: TemplateResult

TemplateResult containing the component’s HTML structure
ui.common.HoopsCoordinateInputElement.update()
update(changedProperties: (PropertyValueMap | Map)): void

Lifecycle method called when the element’s properties change.

This override ensures that both input controls (numeric and range) stay synchronized with the current value property. This is necessary because external updates to the value property may not trigger a re-render of the input elements if they already contain the same value.

Parameters

changedProperties: (PropertyValueMap | Map)

Map of changed properties and their previous values

Returns: void