## html
<div class="node input" style="transform: translate({{ x }}px, {{ y }}px)">
  <sf-template path="Blackprint/nodes/template/routes.sf"></sf-template>
  <sf-template path="Blackprint/nodes/template/header-small.sf"></sf-template>

  <div class="content header-small">
    <div class="scrollable-number-input">
      <div sf-each="key, val in data">
        <input type="number" class="input-no-native"
          sf-bind="val.value"
          step="{{val.step}}" max="{{val.max}}" min="{{val.min}}"
          @pointerdown.prevent.stop="dragMove(event, val)"
          @mousewheel.prevent.stop="mouseWheel(event, val)">
      </div>
    </div>
    <div class="right-port" style="margin-top:3px">
      <sf-template path="Blackprint/nodes/template/output-port.sf"></sf-template>
    </div>
  </div>

  <sf-template path="Blackprint/nodes/template/other.sf"></sf-template>
</div>

## scss-global
.input-no-native{
  /* Firefox */
  -moz-appearance: textfield;

  /* Chrome, Safari, Edge, Opera */
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  &:focus{
      outline: none;
  }
}

.scrollable-number-input{
  display: inline-block;
  margin: 2px -10px 5px 5px;
  input{
    cursor: w-resize;
    background: #313131;
    color: white;
    border: none;
    text-align: center;
    border-radius: 10px;
  }
}

## js-global
Blackprint.Sketch.registerInterface('BPIC/Input/UI/SliderBox',
class SliderBoxIFace extends Context.IFace.SliderBoxIFace {
  dragMove(ev, item){
    this.focusIndex = this.data.indexOf(item);

    function onMove(ev){
      item.value += item.step * ev.movementX;
    }

    var that = this;
    var doc = $(ev.view.document);

    doc.on('pointermove', onMove).once('pointerup', {capture:true}, function(ev2){
      doc.off('pointermove', onMove);

      if(ev2.timeStamp - ev.timeStamp < 100)
        $('input', that.data.getElements(item)).focus();
    });
  }

  mouseWheel(ev, item){
    this.focusIndex = this.data.indexOf(item);
    item.value -= item.step * Math.sign(ev.deltaY);
  }
});