JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div></div>
<span></span>

CSS

div{
    background: #e2e2e2;
    width: 100%;
    margin-top: 50px;
    height: 150px;
}

i{
    position: absolute;
    width: 10px;
    height: 10px;
    background: black;
}

JavaScript

var div = document.querySelector('div');
var output = document.querySelector('span');

function Range(div){
    
    var A = document.createElement('i'),
        B = document.createElement('i'),
        min = 2,
        max = 7,
        stp = 1,
        step = div.offsetWidth/((max-min)/stp);
    console.log(div.offsetWidth + '/((' + max + '-' + min + ')/'+stp+'))'+' = ' + (div.offsetWidth/((max-min)/stp)) ) 
    div.appendChild(A);
    div.appendChild(B);
    
    B.style.left = ((6-min)*step)*(100/div.offsetWidth) + '%';
    
    div.onmousedown = function(e){
        e.preventDefault();
        step = Math.round(div.offsetWidth/((max-min)/stp));        
        var x = e.pageX - div.offsetLeft,
            dragging = true,
            target = Math.abs(x-A.offsetLeft) > Math.abs(x-B.offsetLeft) ? B : A,
            result = min+Math.round(x/step);
        
        function setControl(val){
            val = (val < min) && (min) ||
                  (val > max) && (max) ||
                  val;
            
            target.style.left = (((val-min)*step))*(100/div.offsetWidth) + '%';
        }
        
        setControl(result)
        
        
        document.onmousemove = function(e){
            if(dragging){
                var x = e.pageX - div.offsetLeft,
                    result = min+Math.round(x/step);
                setControl(result)
                output.innerHTML = result;
            }
            
        }
        
        document.onmouseup = function(e){
            dragging = false;
        }
    };
    
}

Range(div);