JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<div class="range-slider" data-min-value="minval" data-max-value="maxval">
    <div class="range-slider-bar range-slider-min" style="width:30%;">
        <div class="range-slider-caret"></div>
    </div>
    <div class="range-slider-bar range-slider-max" style="width:90%;">
        <div class="range-slider-caret"></div>
    </div>
</div>
<input type="text" id="minVal" />
<input type="text" id="maxVal" />

CSS

.range-slider {
    margin-top: 5px;
    height: 10px;
    background: #ccc;
    width: 400px;
    position: relative;
}
.range-slider-bar {
    position: absolute;
    height: 20px;
    top: -5px;
    left: 0;
    text-align: right;
}
.range-slider-caret {
    width: 10px;
    height: 20px;
    background: #ccc;
    border: 1px solid #999;
    display: inline-block;
}
.range-slider-min .range-slider-caret {
    margin-right: -1px;
}
.range-slider-max .range-slider-caret {
    margin-right: -12px;
}

JavaScript

$(function () {
    $('body').on('click', '.range-slider-max', function (e) {
        alert('hit');
    });
});