JSFiddle - React, Tailwind, and code Playground

by Bacco

HTML

<div id="just-a-slider">
   <div class="handle" style="text-align:center">
      <span id="value">0</span>%
   </div>
</div>

CSS

#just-a-slider {
    height: 60px;
    width: 100%;
    border-radius: 3px;
    background-color: #ccc;
}
#just-a-slider .handle {
    color: white;
    width: 10%;
    height: 60px;
    line-height: 60px;
    border-radius: 3px;
    background-color:#2c3e50;
}

JavaScript

////// SEU CODIGO ESTA NO FIM DA PAGINA
////// INCLUI' O DRAGDEALER ANTES PARA O
////// DEMO FICAR AUTOCONTIDO.


/*
*
 * Dragdealer.js 0.9.8
 * http://github.com/skidding/dragdealer
 *
 * (c) 2010+ Ovidiu CherecheÈ™
 * http://skidding.mit-license.org
 */

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like enviroments that support module.exports,
    // like Node.
    module.exports.Dragdealer = factory();
  } else {
    // Browser globals
    root.Dragdealer = factory();
  }
}(this, function () {

var Dragdealer = function(wrapper, options) {
  /**
   * Drag-based component that works around two basic DOM elements.
   *
   *   - The wrapper: The top-level element with the .dragdealer class. We
   *                  create a Dragdealer instance with the wrapper as the
   *                  first constructor parameter (it can either receive the ID
   *                  of the wrapper, or the element itself.) The wrapper
   *                  establishes the dragging bounds.
   *
   *   - The handle: A child of the wrapper element, div with a required
   *                 .handle class (may be overridden in options). This will be
   *                 the dragged element, constrained by the wrapper's bounds.
   *
   *
   * The handle can be both smaller or bigger than the wrapper.
   *
   *   - When the handle is smaller, Dragdealer will act as a regular slider,
   *     enabling the handle to be dragged from one side of the wrapper to
   *     another.
   *
   *   - When the handle is bigger, Dragdealer will act a mask for a draggable
   *     surface, where the handle is the draggable surface contrained by the
   *     smaller bounds of the wrapper. The drag action in this case is used
   *     to reveal and "discover" partial...