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>
<!doctype html>
<html>
  <head>
    <title>range</title>
  </head>
  <body>
    <div class="input_wrapper">
      <span class="left_button"></span>
      <div class="input_left">
      
      </div>
      <div class="input_right">
      
      </div>
      <span class="right_button"></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;
}
.input_left{
  position: absolute;
  width: 0%;
  background : #fff;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  z-index : 2;
}
.input_right{
  position: absolute;
  width: 100%;
  background : #00f;
  right: 0;
  top: 0;
  display: block;
  height: 100%;
}
.left_button{
  position: absolute;
  left: -5px;
  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: -5px;
  top: -5px;
  cursor: pointer;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #000;
  background: #ddd;
  z-index: 3;
  box-sizing: border-box;
}

JavaScript

$(document).ready(function(){
	var left = $(".input_wrapper").css("margin-left");
  left = parseInt(left);
  var widthOfInput = $(".input_wrapper").width();
  var widthOfLeftPart,widthOfRightPart;
  var resize;
  $(".left_button").mousedown(function(){
  resize = true;
  
    $(".input_wrapper").mousemove(function(e){
        widthOfLeftPart = (e.pageX - left-10)*100/widthOfInput;
        var positionOfLeftButton = (e.pageX - left -20);
        $(".left_button").css("left", positionOfLeftButton + "px");
        $(".input_left").css("width",widthOfLeftPart+"%");
      });
  }
  });
  $(".left_button").mouseup(function(){
  			resize = false;
    		alert(resize);
  });
});