JSFiddle - React, Tailwind, and code Playground

by Yaroslav Sosoniuk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <div class="input_wrapper">
            <span class="left_button" id="left_button_range" draggable="true"></span>
            <div class="input_left" id="left_range_input">
            </div>
            <div class="input_right" id="right_range_input">
            </div>
            <span class="right_button" draggable="true" id="right_button_range"></span>
        </div>
  </body>
</html>

CSS

.input_wrapper{
          position: relative;
          display: block;
          width: 60%;
          margin: 20px auto;
          height: 10px;
          background: #FFF;
          border: 1px solid #000;
          box-sizing: border-box;
          border-radius: 5px;
        }
        .input_left{
          position: absolute;
          width: 0%;
          background : #fff;
          left: 0;
          top: 0;
          z-index: 3;
          display: block;
          height: 100%;
        }
        .input_right{
          position: absolute;
          width: 100%;
          background : #00f;
          left: 0;
          top: 0;
          z-index: 2;
          display: block;
          height: 100%;
        }
        .left_button{
          position: absolute;
          left: 0px;
          top: -5px;
          cursor: pointer;
          display: block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 1px solid #000;
          background: #ddd;
          z-index: 5;
          box-sizing: border-box;
        }
        .right_button{
          position: absolute;
          right: 0;
          top: -5px;
          cursor: pointer;
          display: block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 1px solid #000;
          background: #ddd;
          z-index: 5;
          box-sizing: border-box;
        }

JavaScript

var leftRangeInput = $("#left_range_input");
var rightRangeInput = $("#right_range_input");
var left = $(".input_wrapper").css("margin-left");
var width = $(".input_wrapper").width();
var positionLeft;
left = parseInt(left);
var leftButtonRange = document.getElementById("left_button_range");
var rightButtonRange = document.getElementById("right_button_range");
    leftButtonRange.onmousedown = function(e) {
      var coords = getCoords(leftButtonRange);
      var shiftX = coords.left ;
      moveAt(e);
      function moveAt(e) {
        leftButtonRange.style.left = (e.pageX - shiftX - 20)*100/width + '%';
        var widthOfLeft = (e.pageX - shiftX -15 )*100/width;
        $(leftRangeInput).css("width", widthOfLeft + "%");
        if(parseFloat(leftButtonRange.style.left)>= (100 - 20/width) ){
            leftButtonRange.style.left = "calc(100% - 20px)";
            $(leftRangeInput).css("width", "calc(100% - 15px)");
        }
        if(parseFloat(leftButtonRange.style.left)<0) leftButtonRange.style.left = 0+"px";
        if(parseFloat(leftButtonRange.style.left)>(100- 140/width -parseFloat(rightButtonRange.style.right) )) {
            leftButtonRange.style.left = 100 -140/width-parseFloat(rightButtonRange.style.right)  +"%";
            $(leftRangeInput).css("width", 100 -parseFloat(rightButtonRange.style.right) -60/width +"%");
        }
        console.log(leftButtonRange.style.left);
      }
      document.onmousemove = function(e) {
        moveAt(e);
      };
      leftButtonRange.onmouseup = function() {
        document.onmousemove = null;
        leftButtonRange.onmouseup = null;
      };
    }
    leftButtonRange.ondragstart = function() {
      return false;
    };
    function getCoords(elem) {   // кроме IE8-
      return {
        left: left
      };
}
rightButtonRange.onmousedown = function(e) {
  var coords = getCoords(rightButtonRange);
  var shiftX = coords.left ;
  moveAt(e);
  function moveAt(e) {
    rightButtonRange.style.right = ( width...