JSFiddle - React, Tailwind, and code Playground

by Mirjalol97

HTML

<div id='id66' class="range">
  <div id='id66b' class='range__between'></div>
    <button id='id661' class="range__button_1"></button>
    <button id='id662' class="range__button_2"></button>
    <input id='id66i1' class='range_inpt1' type='number' min='20' max='700'>
    - <input id='id66i2' class='range_inpt2' type='number' min='20' max='700'>
</div>

CSS

body {
    position: relative;

    display: flex;

    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

.range {
    width:500px;
    height:10px;

    border-radius: 4px;
    background-color: #ddd;
}

.range__button_1, .range__button_2 {
    position: absolute;
    top: 50%;

    width: 20px;
    height: 20px;

    cursor: pointer;
    transform: translateY(-50%);

    border: none;
    border-radius: 50%;
    background-color: #999;
}
.range__between
{
  position: absolute;
    height: 5px;
    width:0px;
    margin-top:3px;
    border: none;
    background-color: #559933;
}
.range_inpt1, .range_inpt2
{
  margin-top:20px;
  width: 50px;
}

JavaScript

setTimeout(init2slider('id66', 'id66b', 'id661', 'id662', 'id66i1', 'id66i2'), 0);

function init2slider(idX, btwX, btn1X, btn2X, input1, input2) {
    var slider = document.getElementById(idX);
    var between = document.getElementById(btwX); 
    var button1 = document.getElementById(btn1X);
    var button2 = document.getElementById(btn2X);   
    var inpt1 = document.getElementById(input1); 
    var inpt2 = document.getElementById(input2); 
  	
            var min=inpt1.min;
  					var max=inpt1.max;
    
    /*init*/
    var sliderCoords = getCoords(slider);
    button1.style.marginLeft = '0px';
    button2.style.marginLeft = (slider.offsetWidth-button1.offsetWidth) + 'px';
    between.style.width = (slider.offsetWidth-button1.offsetWidth) + 'px';
    inpt1.value = min;
    inpt2.value = max;
    
    inpt1.onchange= function(evt)
    {
    	if (parseInt(inpt1.value) < min)
    		inpt1.value = min;
    	if (parseInt(inpt1.value) > max)
    		inpt1.value = max;
    	if (parseInt(inpt1.value) > parseInt(inpt2.value))
      {
      	var temp = inpt1.value;
    		inpt1.value = inpt2.value;
    		inpt2.value = temp;
      }
      
      
        var sliderCoords = getCoords(slider);
        var per1 = parseInt(inpt1.value-min)*100/(max-min);
        var per2 = parseInt(inpt2.value-min)*100/(max-min);
        var left1 = per1*(slider.offsetWidth-button1.offsetWidth)/100;
        var left2 = per2*(slider.offsetWidth-button1.offsetWidth)/100;
        
            button1.style.marginLeft = left1 + 'px'; 
            button2.style.marginLeft = left2 + 'px';
            
            if (left1 > left2)
              {
                between.style.width = (left1-left2) + 'px';
                between.style.marginLeft = left2 + 'px';
              }
            else
              {
                between.style.width = (left2-left1) + 'px';
                between.style.marginLeft = left1 + 'px';  
              }
    }
    inpt2.onchange= function(evt)
    {
    	if...