Prevent LiveView from updating certain DOM elements

Hello community !

I have a small app that I used to get started with liveview. Inside this app, there is a slider with 2 ranges:

image568×674 16 KB

This slider is handled using JS, which then sends a custom event to LiveView to transmit the values in real time. This all works very well! Until LiveView updates the DOM. The JS actually updates inline styles of the div’s that make up the slider - and LiveView will overwrite the DOM, changing the styles back.

Is there a way to tell LiveView to “ignore” certain parts of the DOM? The slider itself is an entire div without any liveview tags in it, but it is itself inside of a form that is generated using liveview.

To recap, the page has the following structure:

<%= form_for ... %>
  ...
  <div id="slider">
    (no liveview here)
  </div>
  ...
<% end %>

Is there a way to tell liveview not to update anything inside id ?