JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/ion.rangeSlider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/ion.rangeSlider.min.css">
<div class="row text-center">

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 hero-feature">
        <div class="thumbnail">
            
            <div class="caption">
                <h3>Title $15 each</h3>
                <p>
                    <input type="text" id="range1" value="" name="range" />
                </p>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 hero-feature">
        <div class="thumbnail">
            
            <div class="caption">
                <h3>Title $15 each</h3>
                <p>
                    <input type="text" id="range2" value="" name="range" />
                </p>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 hero-feature">
        <div class="thumbnail">
            
            <div class="caption">
                <h3>Title $15 each</h3>
                <p>
                    <input type="text" id="range3" value="" name="range" />
                </p>
            </div>
        </div>
    </div>

</div>
<!-- /.row -->

<div class="row text-center">
    <div class="col-xs-12">
        <p class="lead">Total: $<span class="js-price">0</span>.00</p>
    </div>
</div>

CSS

body {
    margin: 60px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

 .range-bar {
    background-color: #a9acb1;
    border-radius: 15px;
    display: block;
    height: 4px;
    position: relative;
    width: 100%;
}

.range-quantity {
    background-color: #017afd;
    border-radius: 15px;
    display: block;
    height: 100%;
    width: 0;
}

.range-handle {
    background-color: #fff;
    border-radius: 100%;
    cursor: move;
    height: 30px;
    left: 0;
    top: -13px;
    position: absolute;
    width: 30px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.range-min,
.range-max {
    color: #181819;
    font-size: 12px;
    height: 20px;
    padding-top: 4px;
    position: absolute;
    text-align: center;
    top: -9px;
    width: 24px;
}

.range-min {
    left: -30px;
}

.range-max {
    right: -30px;
}

JavaScript

$(function() {
    
    var $total = $(".js-price"),
        step = 15,
        a = 0,
        b = 0,
        c = 0;
    
    function sum () {
        var total = a + b + c;
        $total.text(total);
    }

    $("#range1").ionRangeSlider({
        min: 0,
        max: 100,
        step: step,
        hide_min_max: true,
        onChange: function (data) {
            a = data.from;
            sum();
        }
    });

    $("#range2").ionRangeSlider({
        min: 0,
        max: 100,
        step: step,
        hide_min_max: true,
        onChange: function (data) {
            b = data.from;
            sum();
        }
    });

    $("#range3").ionRangeSlider({
        min: 0,
        max: 100,
        step: step,
        hide_min_max: true,
        onChange: function (data) {
            c = data.from;
            sum();
        }
    });

});