JSFiddle - React, Tailwind, and code Playground

by Rohit Azad

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<label class="rangelabel" for="homeLoan1">

<input max="10000000" min="0" name="points" type="range" class="pl-amount" value="50000" step="50000" id="homeLoan1">

<span style="left: 123.06px;" class="rangeval"><span data-slideval="2100000" class="dynamicVal">2100000</span></span>

</label>

CSS

.rangelabel {
    position: relative;
    display: inline-block;
    background: transparent url(https://img.etimg.com/photo/56312378.cms) no-repeat;
    width: 830px;
    margin-bottom: 18px;
}
input[type=range].pl-amount {
    width: 696px;
    height: 120px;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.rangeval{
  position: absolute;
    width: 110px;
    font-size: 17px;
    font-weight: 700;
    top: 50%;
    text-align: center;
    margin-top: -15px;
    margin-left: -52px;
    z-index: 9;
    background-color: #fff;
    margin-left: 73px;
    display: inline-block;
}

JavaScript

obj_sukanya = {
	slidePointPos: function(scope, fval, maxVal, scopeWidth) {
	    console.log('scope', scope)
        var figure = fval,
            max = maxVal;
        var h = figure / max * (scopeWidth - scope.next().width()) + 'px';
        scope.next().css({
            left: h
        }).removeClass('hidden');
        scope.next().find('.dynamicVal').html(fval).attr('data-slideval', fval);
        scope.parents('.active').find('.inputbox .amount input').val(fval);   
    },
    bind: function(){
    	$(document).on('mousedown', '.pl-amount', function() {
		    $('.pl-amount').bind('change mousemove mouseup', function(){
		        obj_sukanya.slidePointPos($(this), $(this).val(), 10000000, 696);
		    });
        });
    }
    
}

$(document).ready(function(){
	
  	obj_sukanya.bind();
        
})