JSFiddle - React, Tailwind, and code Playground

by baximilian

HTML

<div id="slider-range" class="slider-range" style="height:250px; margin-left:100px">


</div>

<div id="slider-range-bottom" class="slider-range" style="height:250px; margin-left:100px">


</div>


<div>
  <input data-id="0" data-slider-id="slider-range" value="200" />
  <input data-id="1" data-slider-id="slider-range" value="300" />
  <input data-id="2" data-slider-id="slider-range" value="400" />
  <input data-id="3" data-slider-id="slider-range" value="500" />
  <input data-id="4" data-slider-id="slider-range" value="600" />
  <input data-id="0" data-slider-id="slider-range-bottom" value="200" />
  <input data-id="1" data-slider-id="slider-range-bottom" value="300" />
  <input data-id="2" data-slider-id="slider-range-bottom" value="400" />
  <input data-id="3" data-slider-id="slider-range-bottom" value="500" />
  <input data-id="4" data-slider-id="slider-range-bottom" value="600" />
</div>
<div style="display:none" class="ui-slider-handler-template ui-state-default ui-corner-all">
  <div class="tear">
    <div class="ui-slider-handle-title"></div>
  </div>
  <input type="text" value="200" class="rectangle r_5" />
</div>

CSS

.slider-range {
  background: linear-gradient(to top, red, orange, yellow, green);
  border-radius: 0 !important;
  border: 0;
  height: 400px;
  margin-left: 22px;
}

.slider-range.ui-slider:before {
  content: '';
  width: 70px;
  border-bottom: solid 1px #000;
  position: absolute;
  margin-left: -5px;
  margin-top: -1px;
}

.slider-range.ui-slider:after {
  content: '';
  width: 70px;
  border-bottom: solid 1px #000;
  position: absolute;
  top: 100%;
  margin-left: -5px;
  margin-top: -1px;
}

.slider-range.ui-slider .ui-slider-handle {
  height: 1px;
  width: 150px;
  border-color: black;
  margin-bottom: 0px;
  border-bottom: 0px;
}

.ui-slider-handle.ui-state-active {
  color: inherit;
}

.tear {
  float: right;
  display: inline-block;
  transform: rotate(-135deg);
  background: grey;
  width: 17px;
  height: 17px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  margin-top: -9px;
  margin-left: 140px;
}

.tear div {
  transform: rotate(135deg);
  font-size: 80%;
  color: white;
  padding-left: 6px;
  padding-bottom: 2px;
}

.rectangle {
  position: absolute;
  display: inline-block;
  width: 25px;
  height: 12px;
  border: 1px;
  border-color: black !important;
  border-style: solid;
  margin-top: -7px;
  margin-left: -26px;
}

input[type="text"] {
  font-size: 10px;
  text-align: center;
  padding: 0px;
}

input[disabled] {
  background: white;
  color: black;
}

.static-input {
  position: absolute;
  display: inline-block;
  width: 25px;
  height: 12px;
  border-color: white !important;
  margin-left: -7px;
  margin-top: -7px;
}

JavaScript

$.widget('ui.mySlider', $.ui.mouse, {
  options: {
    handles: null,
    activeHandle: 0,
    max: 100,
    min: 0,
    orientation: 'vertical',
    type: 'number',
    ranges: null,
    step: 1,
    value: 0,
    values: null
  },

  _init: function(event) {

    var self = this,
      o = this.options;
    this._keySliding = false;
    this._handleIndex = null;
    this._mouseInit();

    this.element
      .addClass('ui-slider' + ' ui-slider-' + this.options.orientation + ' ui-widget' + ' ui-widget-content' + ' ui-corner-all');
    this._refreshHandles();
    this._refreshValue();
    this._activateHandle(o.activeHandle);
    this._trigger('init', event, this);
  },

  _refreshHandles: function() {
    var self = this;
    var o = this.options;

    $('.ui-slider-handle', this.element).remove();

    if (o.handles && o.handles.length) {

      var element = self.element;

      o.handles.sort(function(a, b) {
        return a.value - b.value;
      });
      o.values = [];

      $.each(o.handles, function(i) {
        o.values.push(o.handles[i].value);

        var handle = $('.ui-slider-handler-template').clone();

        o.handles[i].enabled = 
        					$('input[data-id="' + i + '"][data-slider-id="' + self.element.context.id + '"]').length != 0;

        handle.appendTo(element)
          .addClass('ui-slider-handle')
          .attr('data-id', i)
          .attr('data-value', o.handles[i].value)
          .addClass('ui-state-default' + ' ui-corner-all')
          .removeClass('ui-slider-handler-template')
        if (o.handles[i].enabled)
          handle.show();

        $(".ui-slider-handle-title", handle).text(o.handles[i].label);
        $(".ui-slider-handle-title", handle).attr('data-id', i);
      });
    }

    this.handles = $('div.ui-slider-handle', this.element);

    this.handle = this.handles.eq(0);

    this.handles
      .click(function(event) {
        event.preventDefault();
        self._activateHandle($(this).attr('data-id'));
    ...