<div class="progress-bar-values">
  <gstock-progress-bar value="70">
    70%
  </gstock-progress-bar>

  <br />

  <gstock-icon-button icon="minus" variant="outlined" size="small"></gstock-icon-button>
  <gstock-icon-button icon="plus" variant="outlined" size="small"></gstock-icon-button>
</div>

<script type="module">
  (() => {
    const container = document.querySelector('.progress-bar-values');
    const progressBar = container.querySelector('gstock-progress-bar');
    const subtractButton = container.querySelector('gstock-icon-button[icon=minus]');
    const addButton = container.querySelector('gstock-icon-button[icon=plus]');

    subtractButton.addEventListener('click', () => {
      const value = Math.max(0, progressBar.value - 10);
      progressBar.value = value;
      progressBar.textContent = `${value}%`;
      subtractButton.disabled = value === 0;
      addButton.disabled = value === 100;
    });

    addButton.addEventListener('click', () => {
      const value = Math.min(100, progressBar.value + 10);
      progressBar.value = value;
      progressBar.textContent = `${value}%`;
      addButton.disabled = value === 100;
      subtractButton.disabled = value === 0;
    });
  })();
</script>