ui.html

<style>
  *{
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    user-select: none;
    outline: none;
  }

  body {
    justify-content: center;
  }

  .intro {
    margin-top: -5px;
  }

  .range-container {
    width: 304px;
    display: flex;
    margin: 2px;
    justify-content: space-between;
  }

  .label-container {
    display: flex;
    justify-content: space-between;
  }

  .label {
    font-size: 8px;
    text-align: center;
  }
  .label:last-child {
    text-align: end;
  }
  .label:first-child {
    text-align: start;
  }

  .input-container {
    width: 200px;
  }

  input {
    width: 194px;
  }

  button {
    margin: 5px;
    padding: 12px;
    height: 40px;
    width: 86px;
    cursor: pointer;
    transition: all 150ms linear;
    text-align: center;
    font-size: 14px;

    background-color: #416dea;
    color: #fff;
    border: 0 none;
    border-radius: 4px;    
    box-shadow: 2px 3px 7px #e4e4e4;
  }

  button:hover {
    transition: all 150ms linear;
    opacity: .85;
  }

  .cancel {
    background-color: #F32C52;
  }
</style>
<h2>Pseudo Localization</h2>
<p class="intro">Adjust the slider and your text will change dynammically</p>
<hr>
<div class="range-container">
  <div class="input-container">
    <div class="label-container">
      <p class="label">50%</p>
      <p class="label">75%</p>
      <p class="label">100%</p>
      <p class="label">125%</p>
      <p class="label">150%</p>
    </div>
    <input id="input" type="range" list="tickmarks" min="50" max="150" step="5">
    <datalist id="tickmarks">
      <option value="50" label="50%"></option>
      <option value="55"></option>
      <option value="60"></option>
      <option value="65"></option>
      <option value="70"></option>
      <option value="75" label="75%"></option>
      <option value="80"></option>
      <option value="85"></option>
      <option value="90"></option>
      <option value="95"></option>
      <option value="100" label="100%"></option>
      <option value="105"></option>
      <option value="110"></option>
      <option value="115"></option>
      <option value="120"></option>
      <option value="125" label="125%"></option>
      <option value="130"></option>
      <option value="135"></option>
      <option value="140"></option>
      <option value="145"></option>
      <option value="150" label="150%"></option>
    </datalist>
  </div>
  <button id="revert">Revert</button>
</div>
<script>

const input = document.getElementById('input')
const revert = document.getElementById('revert')

input.onchange = () => {
  parent.postMessage({ pluginMessage: { type: 'start', options: { input : input.value } } }, '*')
}

revert.onclick = () => {
  parent.postMessage({ pluginMessage: { type: 'revert' } }, '*')
}

</script>