JSFiddle - React, Tailwind, and code Playground

by morii

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css">
<span id="label">value</span>
<div id="test"/>

CSS

#test{
  margin: 10px;
  width: 200px;
}

#test a.ui-slider-handle.growing{
  background: red;
}

JavaScript

(function() {

  (function($) {
    return $.widget("ui.windowSlider", $.ui.slider, {
      options: {
        totalMin: 0,
        totalMax: 400
      },
      _create: function() {
        this._super('_create');
        this.options.min += -1;
        this.options.totalMin += -1;
        return this.windowSize = this.options.max - this.options.min;
      },
      _slide: function(event, index, newValue) {
        var oldValue,
          _this = this;
        console.log("val: " + (this.value()) + ", newVal: " + newValue);
        oldValue = this.value();
        this._super(event, index, newValue);
        if (!this.movingWindowIntervalId) {
          if ((newValue === this.options.max) || (newValue === this.options.min && oldValue !== 0)) {
            this.change = newValue === this.options.max ? 1 : newValue === this.options.min ? -1 : void 0;
            console.log("extremum: " + this.change);
            this.movingWindowIntervalId = setInterval(function() {
              return _this.moveWindow(_this.change);
            }, 500);
            this.element.find('a').addClass('growing');
          }
        } else {
          if ((this.options.min < newValue && newValue < this.options.max)) {
            this.stopMovingWindow();
            this.moveMarkerFromGrowingPosition();
          }
        }
        return (this.options.min < newValue && newValue < this.options.max);
      },
      _stop: function(event, index) {
        this._super('_stop', event, index);
        if (this.movingWindowIntervalId) {
          this.stopMovingWindow();
          this.moveMarkerFromGrowingPosition();
          this._trigger("slide", event, {
            value: this.value()
          });
        }
        return console.log("stop: " + (this.value()));
      },
      _setValue: function(key, value) {
        switch (key) {
          case "reset":
            return this.reset();
          default:
            return this._super("_setOption", key, value);
        }
     ...