Sliders

<div class="carousel">
  <div class="carousel-track" id="track">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>
<div class="controls">
  <button onclick="move(-1)">‹</button>
  <button onclick="move(1)">›</button>
</div>

.carousel {
  overflow: hidden;
  border-radius: 12px;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s
    cubic-bezier(0.4,0,0.2,1);
}
.slide {
  min-width: 100%;
  flex-shrink: 0;
}
/* JS: track.style.transform =
   `translateX(-${index * 100}%)` */

<label>Volume <span id="val">65</span>%</label>
<input
  class="styled-range"
  type="range"
  min="0" max="100" value="65"
  oninput="val.textContent=this.value"
/>

.styled-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #2a2f42;
  cursor: pointer;
}
.styled-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #5af0c4;
  box-shadow: 0 0 0 3px
    rgba(90,240,196,0.2);
  transition: box-shadow 0.2s;
}
.styled-range::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 6px
    rgba(90,240,196,0.2);
}

<div class="testimonial-wrap">
  <div class="track" id="track">
    <div class="card">
      <p class="quote">"Quote here"</p>
      <span class="author">— Name</span>
    </div>
    <!-- repeat .card -->
  </div>
</div>

.testimonial-wrap {
  overflow: hidden;
  position: relative;
}
.testimonial-wrap::before,
.testimonial-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px; z-index: 2;
}
.testimonial-wrap::before {
  left: 0;
  background: linear-gradient(
    to right, #0d0f14, transparent);
}
.testimonial-wrap::after {
  right: 0;
  background: linear-gradient(
    to left, #0d0f14, transparent);
}
.track {
  display: flex;
  gap: 1rem;
  transition: transform 0.5s ease;
}