Progress bar

Progress Bar Styles

Progress Style 1

75%

                            
<section class="progress-bars elements-page">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress1">
                <h4>Progress Style 1</h4>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                        <p class="rangevalue"><span class="rangevalue1">75</span>%</p>
                    </div>
                    </div>
            </div>
        </div>
    </div>
</section>

Progress Style 2

70%

                            
<section class="progress-bars elements-page">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress2">
                <h4>Progress Style 2</h4>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                        <p class="rangevalue"><span class="rangevalue3">70</span>%</p>
                    </div>
                </div>
            </div>        
        </div>
    </div>
</section>

Progress Style 3

72%

                            
<section class="progress-bars elements-page">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress3">
                <h4>Progress Style 3</h4>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="72" style="width: 72%;" aria-valuemin="0" aria-valuemax="100">
                        <p class="rangevalue"><span class="rangevalue4">72</span>%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Progress Style 4

70%

                            
<section class="progress-bars elements-page">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress4">
                <h4>Progress Style 4</h4>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                        <p class="rangevalue"><span class="rangevalue3">70</span>%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Filter Bar Styles

Pricing 

                                
<section class="progress-bars elements-page">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress5">
                <div id="slider-range1" class="range-bar"></div> 
                <p class="range-value">
                    <span>Pricing</span>
                    <input type="text" id="amount1" readonly>
                </p>
            </div>
        </div>
    </div>
</section>

Pricing 

                                
<section class="progress-bars elements-page">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress6">
                <div id="slider-range2" class="range-bar"></div> 
                <p class="range-value">
                    <span>Pricing</span>
                    <input type="text" id="amount2" readonly>
                </p>
            </div>
        </div>
    </div>
</section>