<label for="customRange3" class="form-label">Example range</label>

<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

<input type="range" name="range" step="50000" min="100000" max="1000000" value="" onchange="rangePrimary.value=value">

<input type="text" id="rangePrimary" />

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">

  <div class="carousel-indicators">

    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>

    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>

  </div>

  <div class="carousel-inner">

    <div class="carousel-item active" data-bs-interval="10000">

      <img src="..." class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">

        <h5>First slide label</h5>

        <p>Some representative placeholder content for the first slide.</p>

      </div>

    </div>

    <div class="carousel-item" data-bs-interval="2000">

      <img src="..." class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">

        <h5>Second slide label</h5>

        <p>Some representative placeholder content for the second slide.</p>

      </div>

    </div>

    <div class="carousel-item">

      <img src="..." class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">

        <h5>Third slide label</h5>

        <p>Some representative placeholder content for the third slide.</p>

      </div>

    </div>

  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="visually-hidden">Previous</span>

  </button>

  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="visually-hidden">Next</span>

  </button>

</div>

.carousel-inner .carousel-item-right.active,

.carousel-inner .carousel-item-next {

  transform: translateX(33.33%);

}

​

.carousel-inner .carousel-item-left.active, 

.carousel-inner .carousel-item-prev {

  transform: translateX(-33.33%)

}

​

.carousel-inner .carousel-item-right,

.carousel-inner .carousel-item-left{ 

  transform: translateX(0);

}

​

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner">

    <div class="carousel-item active" data-interval="10000">

      <img src="..." class="d-block w-100" alt="...">

    </div>

    <div class="carousel-item" data-interval="2000">

      <img src="..." class="d-block w-100" alt="...">

    </div>

    <div class="carousel-item">

      <img src="..." class="d-block w-100" alt="...">

    </div>

  </div>

  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

No, the HTML5 range input only accepts one input. I would recommend you to use 

something like the jQuery UI range slider for that task.

<form>

  <div class="form-group">

    <label for="formControlRange">Example Range input</label>

    <input type="range" class="form-control-range" id="formControlRange">

  </div>

</form>

​

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>