JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<div>
    low:<input type="text" class="txtLow"></input>
    high:<input type="text" class="txtHigh"></input>
    <button class="btnPlot">plot</button>
</div>
<br/>
<div class="list">
    <div class="list-item">5</div>
    <div class="list-item">10</div>
    <div class="list-item">15</div>
    <div class="list-item">20</div>
    <div class="list-item">25</div>
    <div class="list-item">30</div>
    <div class="list-item">35</div>
    <div class="list-item">40</div>
    <div class="list-item">45</div>
    <div class="list-item">50</div>
    <div class="list-item">55</div>
    <div class="list-item">60</div>
    <div class="list-item">65</div>
    <div class="list-item">70</div>
    <div class="list-item">75</div>
    <div class="list-item">80</div>
    <div class="list-item">85</div>
    <div class="list-item">90</div>
    <div class="list-item">95</div>
    <div class="list-item">FREE</div>
    
    <div class="spacer low"></div>
    <div class="spacer high"></div>

CSS

.list {
    border:1px solid #d8d8d8;
    position: relative;
    max-height:500px;
    overflow-y:auto;
}
.list-item {
    height:40px;
    padding-left:40px;
}

.spacer{
    position:absolute;
    width:100%;
}
.spacer.low{
    top:40px;
    border-bottom:2px solid green;
}
.spacer.low:after{
    content:'low';
    float:right;
    color:#d8d8d8;
}

.spacer.high{
    top:128px;
    border-bottom:2px solid red;
}
.spacer.high:after{
    content:'high';
    float:right;
    color:#d8d8d8;
}

JavaScript

$(function(){
    $(".btnPlot").click(function(e){
        var low = $(".txtLow").val();
        var high = $(".txtHigh").val();
        low = +low;
        high = +high;
        if(high<low){
            alert("error");
            return;
        }
        var lowPos = (low/5)*40;
        var highPos = (high/5)*40;
       
        lowPos = lowPos === 0 ? -20: lowPos - 40;
        highPos = highPos === 0 ? -20: highPos - 40;
        $(".spacer.low").css({ top: lowPos + 'px' });
        $(".spacer.high").css({ top: highPos + 'px' });
    });
});