JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<dt class="odd">Сила удара (Дж)</dt>
<dd class="odd" style="display: block;">
<ol>
    <li>
                <a href="http://xn--27-mlc1avl.xn--p1ai/electro-instrument.html?impact_energy=159">1.4</a>
                        (1)
            </li>
    <li>
                <a href="http://xn--27-mlc1avl.xn--p1ai/electro-instrument.html?impact_energy=167">10</a>
                        (2)
            </li>
    <li>
                <a href="http://xn--27-mlc1avl.xn--p1ai/electro-instrument.html?impact_energy=160">2.5</a>
                        (1)
            </li>
    <li>
                <a href="http://xn--27-mlc1avl.xn--p1ai/electro-instrument.html?impact_energy=162">3</a>
                        (1)
            </li>
    <li>
                <a href="http://xn--27-mlc1avl.xn--p1ai/electro-instrument.html?impact_energy=163">3.2</a>
                        (1)
            </li>
    <li>
                <a href="http://xn--27-mlc1avl.xn--p1ai/electro-instrument.html?impact_energy=164">3.8</a>
                        (2)
            </li>
    <li>
                <a href="http://xn--27-mlc1avl.xn--p1ai/electro-instrument.html?impact_energy=165">4.2</a>
                        (2)
            </li>
    <li>
                <a href="http://xn--27-mlc1avl.xn--p1ai/electro-instrument.html?impact_energy=166">8</a>
                        (1)
            </li>
</ol>
</dd>

<div class="price-slider">
    <div class="selector">
       <div class="handler left"></div>
       <div class="handler right"></div>
    </div>
</div>

CSS

.price-slider .selector .handler {
    background: white;
    width: 16px;
    height: 16px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.4), 2px 7px 7px rgba(0,0,0,0.2);
    cursor: pointer;
    border-radius: 10px;
    margin-top: -1px;
}
.price-slider .selector .handler.left {
    float: left;
}
.price-slider .selector .handler.right {
    float: right;
}

.price-slider {
    width: 100%;
    min-width: 100px;
    max-width: 200px;
    background-color: #aaa;
    border-radius: 10px;
}

.price-slider .selector {
    width: 80%;
    height: 16px;
    background-color: #ddd;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    border-top: 0.5px solid rgba(0,0,0,0.2);
}

JavaScript

//$('.price-slider .selector .handler').drag();


    var $dragging = null;

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            $dragging.offset({
                left: e.pageX
            });
            var left = $('.price-slider .selector .handler.left').offset().left;
            var right = $('.price-slider .selector .handler.right').offset().left;
            var range = right - left;
            $('.price-slider .selector').css({width: range+'px'});
        }
    });


    $(document.body).on("mousedown", "div", function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });