JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
<div id="main">
<div id="content-slider"></div>
<div id="content-scroll">
<div id="content-holder">
      <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
      </div>
      <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
      </div>
      <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
      </div>
      <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu...

CSS

#main {
  width: 510px;
  margin: 0 auto;
}

#content-slider {
  width: 490px;
  height: 6px;
  margin: 5px;
  background: #BBBBBB;
  position: relative;
}

.ui-slider-handle {
  width: 8px;
  height: 14px;
  position: absolute;
  top: -4px;
  background: #478AFF;
  border: solid 1px black;
}

#content-scroll {
  width: 500px;
  height: 300px;
  margin-top: 10px;
  overflow: hidden;
  border: solid 1px black;
}

#content-holder {
  width: 1500px;
  height: 270px;
}

.content-item {
  width: 290px;
  height: 270px;
  padding: 5px;
  float: left;
}

JavaScript

/*
 * jQuery UI Slider @VERSION
 *
 * Copyright (c) 2008 Paul Bakaus
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 * 
 * http://docs.jquery.com/UI/Slider
 *
 * Depends:
 *    ui.core.js
 */
(function($) {

$.fn.unwrap = $.fn.unwrap || function(expr) {
  return this.each(function(){
     $(this).parents(expr).eq(0).after(this).remove();
  });
};

$.widget("ui.slider", {
    plugins: {},
    ui: function(e) {
        return {
            options: this.options,
            handle: this.currentHandle,
            value: this.options.axis != "both" || !this.options.axis ? Math.round(this.value(null,this.options.axis == "vertical" ? "y" : "x")) : {
                x: Math.round(this.value(null,"x")),
                y: Math.round(this.value(null,"y"))
            },
            range: this._getRange()
        };
    },
    _propagate: function(n,e) {
        $.ui.plugin.call(this, n, [e, this.ui()]);
        this.element.triggerHandler(n == "slide" ? n : "slide"+n, [e, this.ui()], this.options[n]);
    },
    destroy: function() {
        
        this.element
            .removeClass("ui-slider ui-slider-disabled")
            .removeData("slider")
            .unbind(".slider");
        
        if(this.handle && this.handle.length) {
            this.handle
                .unwrap("a");
            this.handle.each(function() {
                $(this).data("mouse")._mouseDestroy();
            });
        }
        
        this.generated && this.generated.remove();
        
    },
    _setData: function(key, value) {
        $.widget.prototype._setData.apply(this, arguments);
        if (/min|max|steps/.test(key)) {
            this._initBoundaries();
        }
        
        if(key == "range") {
            value ? this.handle.length == 2 && this._createRange() : this._removeRange();
        }
        
    },

    _init: function() {
        
        var self = this;
        this.element.addClass("ui-slider");
       ...