Stepper

<ins-input-stepper
  value="50"
  step="10"
  min="10"
  max="100"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-input-stepper>

<ins-input-stepper></ins-input-stepper>

<ins-input-stepper 
  id="dsv">
</ins-input-stepper>

<script>
  var dsv = document.getElementById('dsv');
  dsv.addEventListener('didLoad', function(e){
    dsv.value = '100';
  });
</script>

<ins-input-stepper
  value="200"
  label="Name">
</ins-input-stepper>

<ins-input-stepper 
  label="Disabled" 
  disabled>
</ins-input-stepper>

<ins-input-stepper 
  label="Read Only" 
  readonly>
</ins-input-stepper>

<ins-input-stepper 
  has-error 
  label="Quantity"
  error-message="Please enter quantity">
</ins-input-stepper>

<ins-input-stepper 
  id="insInput">
</ins-input-stepper>

<p id="demo"></p>

<script>
const insInput = document.getElementById('insInput')
insInput.addEventListener('insInput', event => {
  console.log(event.detail.value);
  console.log(event.detail.validated);
  console.log(event.detail.keyCode);
  document.getElementById("demo").innerHTML = event.detail.validated;
});
</script>

<ins-input-stepper
  id="valueChange"
  placeholder="Email"
  label="Email"
  field="email"
  icon="icon-mail">
</ins-input-stepper>

<p id="demo"></p>

<script>
  const valueChange = document.getElementById('valueChange')
  valueChange.addEventListener('valueChange', event => {
    console.log(event.detail);
    document.getElementById("demo").innerHTML = event.detail;
  });
</script>