frequal.com

TeaVM Realtime Response to Range (Slider) Changes

The HTML Range input is shown in most graphical browsers as a slider. The standard TeaVM/Flavour binding only results in the value updating after a change event, which is delayed until the mouse is released. If you want the best user experience, you need to handle the input event, which is fired while the knob is being dragged.

Adding the Listener

In your main() method, you'll need to add a listener for the input event. Make sure you match the id looked up with the id attribute in your HTML (I use slider-id in this example).

    final Window window = Window.current();
    HTMLElement element = window.getDocument().getElementById("slider-id");
    HTMLInputElement input = (HTMLInputElement) element;
    element.addEventListener("input", new EventListener() {
      @Override
      public void handleEvent(Event evt) {
        String sliderValue = input.getValue();
        // Use the slider's value here to do something in your app
        Templates.update();  // Important if you are updating the DOM to force a repaint
      }
    });

Your UI will now rapidly update as the user drags the slider — a great user experience.

More about TeaVM

Read these articles about TeaVM:

Last modified on 5 Aug 2018 by AO