tests/vanilla/umd.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <link rel="stylesheet" href="../barebones.css" />
    <script src="./node_modules/svelte-range-slider-pips/dist/range-slider-pips.js"></script>
    <script>
      document.onreadystatechange = function () {
        if (document.readyState === 'complete') {
          // create and initialise the slider
          const slider = document.querySelector('.my-slider');
          const rangeSliderPips = new RangeSliderPips({
            target: slider,
            props: {
              pips: true,
              all: 'label',
              float: true
            }
          });

          // listen for changes to the slider and update the output
          const output = document.querySelector('#value-output');
          rangeSliderPips.$on('change', function (e) {
            output.innerHTML = e.detail.value;
          });
        }
      };
    </script>
  </head>
  <body style="padding: 30px">
    <h1>Testing loading JS (umd) script</h1>
    <div class="my-slider"></div>
    <h3 id="value-output">0</h3>
  </body>
</html>