Web Designer Wall

Snippets Animation

Bootstrap 5 Emoji Rating Slider

A five-level emoji rating slider that updates the face and label as you drag, with a submit confirmation.

Bootstrap 5 No jQuery Feb 2020 4.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 520px">
    <form class="wdw-card p-4 p-md-5 text-center" id="rateForm" onsubmit="return false">
      <span class="wdw-eyebrow">Feedback</span>
      <h1 class="wdw-heading h3 mt-1 mb-1">How was your experience?</h1>
      <p class="wdw-muted mb-4">Drag the slider to tell us how we did.</p>

      <div class="rate-face mx-auto mb-3" id="rateFace" aria-hidden="true">😐</div>
      <p class="h5 fw-bold mb-4" id="rateLabel" aria-live="polite">Okay</p>

      <label for="rateRange" class="visually-hidden">Rating from 1 (awful) to 5 (great)</label>
      <input type="range" class="form-range rate-range" id="rateRange" min="1" max="5" step="1" value="3" aria-valuetext="Okay">
      <div class="d-flex justify-content-between small wdw-muted mt-2 px-1">
        <span>Awful</span><span class="d-none d-sm-inline">Bad</span><span class="d-none d-sm-inline">Okay</span><span class="d-none d-sm-inline">Good</span><span>Great</span>
      </div>

      <div class="mt-4">
        <button type="submit" class="btn btn-primary rounded-pill px-5" id="rateSubmit">Send feedback</button>
        <p class="small text-success fw-semibold mt-3 mb-0 d-none" id="rateThanks" role="status">Thanks! Your feedback was sent.</p>
      </div>
    </form>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets