JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
  <p>Use the slider to resize the box</p>
  <div id="zoom_slider" class="slider" data-input="#valueinhere">
    <div class="handle"></div>
    </div><input type="text" />

  <div id="zoom_element"></div>
</div>

<span id="valueinhere"></span>

CSS

div.slider { width:256px; margin:10px 0; background-color:#ccc; height:10px; position: relative; }
  div.slider div.handle { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }

  div#zoom_element { width:50px; height:50px; background:#2d86bd; position:relative; }

JavaScript

(function() {
    var zoom_slider = $('zoom_slider'),
        rgb_slider = $('rgb_slider'),
        box = $('zoom_element');

    new Control.Slider(zoom_slider.down('.handle'), zoom_slider, {
      range: $R(40, 160),
      sliderValue: 50,
      onSlide: function(value,slider) {
          // this is the call you are looking for
        slider.track.next().value = value;
          //
          $$(slider.track.readAttribute('data-input')).first().update(value);
          box.setStyle({ width: value + 'px', height: value + 'px' });
      },
      onChange: function(value) { 
        box.setStyle({ width: value + 'px', height: value + 'px' });
      }
    });
  })();