static/usage/v7/range/ion-change-event/demo.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Range</title>
    <link rel="stylesheet" href="../../../common.css" />
    <script src="../../../common.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
    <style>
      .demo {
        max-width: 320px;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-content>
        <div class="container">
          <div class="demo">
            <ion-range aria-label="Range with ionChange"></ion-range>
          </div>
        </div>
      </ion-content>
    </ion-app>
    <script>
      const range = document.querySelector('ion-range');

      range.addEventListener('ionChange', ({ detail }) => {
        console.log('ionChange emitted value:', detail.value);
      });
    </script>
  </body>
</html>