How to improve performance of setting HTML video currentTime in LitElement

Question

I am using a range input slider to capture user input:

<input class="slider" type="range" oninput="change">

There also is a video:

<video class"output" src="video.mp4"></video>

My JavaScript function change looks something like this:

change(e){
this.shadowRoot.querySelector('.output').currentTime = this.shadowRoot.querySelector('.slider').value;
}

This works and I can control the video current time with the slider. However, it is quite laggy and performance isn't as good as I think it could be. Is there any smarter/more performant way of doing this?

Thanks!

Answer 1

Selecting the elements on each input event is probably not very performant and should be done just once (ie in firstUpdated()). However if you don't have a specific reason for manually selecting the elements, consider using lit-html bindings instead:

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('my-video')
export class MyVideo extends LitElement {
  @property() currentTime = 0;

  render() {
    return html`
      <video src="..." .currentTime=${this.currentTime}></video>
      <input type="range" @input=${e => this.currentTime = e.target.value}>
    `;
  }
}

Here's a demo.