Testimonials slider / Swipe slider / Text slider / Slider

<div class="testimonials">

<div class="container">

<div class="col-md-12 px-0 mx-auto">

<div class="row mx-0 ">

<div class="col-md-12">

<h2 class="text-center">Testimonials</h2>

</div>

</div>

<div class="row mx-0">

<div class="col-sm-12">

<div class="carousel-controls testimonial-carousel-controls">

<div class="control d-flex align-items-center justify-content-center prev mt-3"><i

class="fa fa-chevron-left"></i></div>

<div class="control d-flex align-items-center justify-content-center next mt-3"><i

class="fa fa-chevron-right"></i></div>

<div class="testimonial-carousel">

<div class="one-slide mx-auto">

<div

class="testimonial w-100 px-3 text-center d-flex flex-direction-column justify-content-center flex-wrap align-items-center">

<div class="col-md-3"><img src="images/testimonial-sample.png" /></div>

<div class="col-md-9">

<div class="text-left blockquote">Lorem Ipsum is simply dummy text of the

printing and typesetting industry. Lorem Ipsum has been the industry's

standard dummy text ever since the 1500s, when an unknown printer took a

galley of type and scrambled</div>

<div class="blockquote-footer  text-left">

<h4>Name here</h4>

<p>Designation here</p>

</div>

</div>

</div>

</div>

<div class="one-slide mx-auto">

<div

class="testimonial w-100 px-3 text-center d-flex flex-direction-column justify-content-center flex-wrap align-items-center">

<div class="col-md-3"><img src="images/testimonial-sample.png" /></div>

<div class="col-md-9">

<div class="text-left blockquote">Lorem Ipsum is simply dummy text of the

printing and typesetting industry. Lorem Ipsum has been the industry's

standard dummy text ever since the 1500s, when an unknown printer took a

galley of type and scrambled</div>

<div class="blockquote-footer  text-left">

<h4>John Smith</h4>

<p>CEO</p>

</div>

</div>

</div>

</div>

<div class="one-slide mx-auto">

<div

class="testimonial w-100 px-3 text-center d-flex flex-direction-column justify-content-center flex-wrap align-items-center">

<div class="col-md-3"><img src="images/testimonial-sample.png" /></div>

<div class="col-md-9">

<div class="text-left blockquote">Lorem Ipsum is simply dummy text of the

printing and typesetting industry. Lorem Ipsum has been the industry's

standard dummy text ever since the 1500s, when an unknown printer took a

galley of type and scrambled</div>

<div class="blockquote-footer  text-left">

<h4>John Smith</h4>

<p>CEO</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/font-awesome/css/font-awesome.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />

<style type="text/css">

.slick-dots img{display:block;width:100%;height:auto}

.slick-dots{display:flex;justify-content:center;margin:0;padding:1rem 0;list-style-type:none}

.slick-dots li{margin:0 .25rem}.slick-dots

button{display:block;width:1rem;height:1rem;padding:0;border:none;border-radius:100%;background-color:#e5e5e5;text-indent:-9999px}

li.slick-active

button{background-color:#2aabe1}

.carousel-controls .control{position:absolute;transform:translateY(-50%);width:45px;height:45px;border-radius:50%;border:2px solid

#fff;z-index:1;top:40%!important;border:4px solid #000}

.prev{left:-2.25rem}

.next{right:-2.25rem}

@media screen and (max-width:768px){.testimonials{max-height:700px}.icon-overlay{height:300px;top:calc(50% -

150px)}.carousel-controls .control{width:25px;height:25px}.prev{left:0}.next{right:0}

.control i{font-size:.7rem}.testimonials .message{font-size:1rem}.testimonials h2{font-size:1.5rem}}

</style>

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="js/jquery-3.3.1.min.js"></script>

<script src="js/sticky-header.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/popper.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

 <script>

 $(document).ready(function() {

  $(".testimonial-carousel").slick({

    dots: true,

  

    infinite: true,

    slidesToShow: 1,

    slidesToScroll: 1,

    autoplay: true,

    arrows: true,

    prevArrow: $(".testimonial-carousel-controls .prev"),

    nextArrow: $(".testimonial-carousel-controls .next")

  });

});

</script>

Ranger / Price Range Bootstrap 4

<!doctype html>

<html lang="en">

   <head>

      <!-- Required meta tags -->

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->

      <link rel="stylesheet" href="css/bootstrap.min.css" />

      <title>Value Ranger</title>

   </head>

   <body>

     

      <div class="col-md-6 mx-auto  p-0 mb-5 "> <h1>HTML Ranger</h1>

         <div class="input-group my-2">

            <label for="customRange">Range 1</label>

            <input type="range" class="custom-range" id="customRange" min="0" value="4000" max="29813"> 

            <div id="result" class="mb-2">Value: <b></b></div>

         </div>

         <div class="input-group mb-2">

            <label for="customRange">Range  2

            </label>

            <input type="range" class="custom-range" id="customRange1"  min="0" value="12000" max="17817"> 

            <div id="result1"  class="mb-2">Value: <b></b></div>

         </div>

      </div>

      <!-- Optional JavaScript -->

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->

      <script  src="js/jquery-3.3.1.min.js" ></script>

      <script src="js/bootstrap.min.js"></script> 

      <script>

         $(document).ready(function(){

             // Read value on page load

             $("#result b").html($("#customRange").val());

         

             // Read value on change

             $("#customRange").change(function(){

                 $("#result b").html($(this).val());

             });

         

         

                $("#result1 b").html($("#customRange1").val());

         

             // Read value on change

             $("#customRange1").change(function(){

                 $("#result1 b").html($(this).val());

             });

         });        

      </script>

   </body>

</html>