Custom Field Editor Example
This example creates field editor that allows integer values to be
set and displayed using a slider. Note that the value of the field
is written/read using the component's value
attribute.
// Creates an object based in the HTML Element prototype class MySlider extends HTMLElement { // Fires when an instance of the element is created constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style> :host { margin: 0; padding: 0px; width: 100%; display: block; } .spacer { padding: 10px; height: 30px; overflow: hidden; } #thefield { width: 100%; } </style> <div class="spacer"> <input id="thefield" type="range" max="100" min="0" value="0"><br/> </div> `; } readOnlyCallback() { this.shadowRoot.querySelector('#thefield').readOnly = this.cueInterface.readOnly; } static get observedAttributes() { return ['value']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'value') { this.shadowRoot.querySelector('input').value = newValue; } } connectedCallback() { // getting initial value of value attribute const value = this.hasAttribute('value') ? this.getAttribute('value') : ''; // setting value property of input element this.shadowRoot.querySelector('input').value = value; this.shadowRoot.querySelector('input').addEventListener('input', e => { this.setAttribute('value', e.target.value); }); // Add a watcher that will watch on if the custom field is locked. // If locked then invoke the callback function and make the field readonly. if (this.cueInterface) { this.cueInterface.addReadOnlyWatcher(() => this.readOnlyCallback()); } } } customElements.define('my-slider', MySlider);