wired-slider

<html>

<head>
<script src="https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.js"></script>
  <script src="https://unpkg.com/iamjared@1.0.3"></script>
  <style>
    body {
      margin: 0;
      padding: 10px;
      font-family: sans-serif;
      line-height: 1.5;
    }
  </style>
</head>

<body>
  <div id="vis0"></div>
  <wired-slider id="slider"></wired-slider>
  <div id="label"></div>
  <p>
    <wired-button id="btn">Reset</wired-button>
  </p>

slider.addEventListener('change', () => {
      label.textContent = slider.value;
      console.log('gr', bar.roughness);
      bar.roughness = slider.value;
    });
    document.getElementById('btn').addEventListener('click', () => {
      slider.value = 0;
      label.textContent = slider.value;
    });
  </script>
</body>

</html>

https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.js

https://unpkg.com/iamjared@1.0.3