JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css">
<div class="container">
  <h2><code>data-orientation="vertical"</code></h2>
  <div class="label u-left" style="height: 200px">
    <input type="range" step="25" min="0" max="100" data-rangeslider data-orientation="vertical">
    <div class="label-center">
      <div>100</div>
      <div>75</div>
      <div>50</div>
      <div>25</div>
      <div>0</div>
    </div>
  </div>
  <output class="u-text-left"></output>
</div>

CSS

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  color: #404040;
  font-family: Helvetica, arial, sans-serif;
}

body {
  padding: 50px 20px;
  margin: 0 auto;
  max-width: 800px;
}

output {
  display: block;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin: 30px 0;
  width: 100%;
}

.container {
  width: 200px;
  margin: auto;
}
.u-cf:before,
.u-cf:after {
  content: "";
  display: table;
}

.u-cf:after {
  clear: both;
}

.u-text-left {
  text-align: left;
}

.label {
  position: relative;
  font-weight: 700;
}

.label-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  top: 5%;
  left: -50px;
  height: 90%;
}

JavaScript

$(function() {
  var $document = $(document);
  var selector = '[data-rangeslider]';
  var $element = $(selector);
  // For ie8 support
  var textContent = ('textContent' in document) ? 'textContent' : 'innerText';
  // Example functionality to demonstrate a value feedback
  function valueOutput(element) {
    var value = element.value;
    var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
    output[textContent] = value;
  }
  $document.on('input', 'input[type="range"], ' + selector, function(e) {
    valueOutput(e.target);
  });
  // Example functionality to demonstrate disabled functionality
  $document.on('click', '#js-example-disabled button[data-behaviour="toggle"]', function(e) {
    var $inputRange = $(selector, e.target.parentNode);
    if ($inputRange[0].disabled) {
      $inputRange.prop("disabled", false);
    } else {
      $inputRange.prop("disabled", true);
    }
    $inputRange.rangeslider('update');
  });
  // Example functionality to demonstrate programmatic value changes
  $document.on('click', '#js-example-change-value button', function(e) {
    var $inputRange = $(selector, e.target.parentNode);
    var value = $('input[type="number"]', e.target.parentNode)[0].value;
    $inputRange.val(value).change();
  });
  // Example functionality to demonstrate programmatic attribute changes
  $document.on('click', '#js-example-change-attributes button', function(e) {
    var $inputRange = $(selector, e.target.parentNode);
    var attributes = {
      min: $('input[name="min"]', e.target.parentNode)[0].value,
      max: $('input[name="max"]', e.target.parentNode)[0].value,
      step: $('input[name="step"]', e.target.parentNode)[0].value
    };
    $inputRange.attr(attributes);
    $inputRange.rangeslider('update', true);
  });
  // Example functionality to demonstrate destroy functionality
  $document
    .on('click', '#js-example-destroy...