Free Previewui-component
Circular Slider

Circular progress slider with draggable handle. Users drag around the circle to set values 0-100. Built with GSAP Draggable. Smooth arc drawing with configurable colors and stroke widths. Perfect for volume controls, ratings, and circular inputs.
Loading preview...
index.htmlEditable
<div class="circular_slider_demo_wrap">
  <div
    class="circular_slider_wrap"
    data-anm-circular-slider
    data-anm-circular-slider-type="snap"
    data-anm-circular-slider-autoplay="0"
  >
    <div class="circular_slider_container" data-anm-circular-slider-container>
      <svg class="circular_slider_svg" viewBox="0 0 200 200">
        <circle
          class="circular_slider_path"
          data-anm-circular-slider-path
          cx="100"
          cy="100"
          r="100"
        />
      </svg>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/running-poster-neutral-3x4-1.avif"
          alt="Running"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/tennis-poster-orange-3x4.avif"
          alt="Tennis"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/cycling-poster-blue-3x4.avif"
          alt="Cycling"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/football-poster-orange-3x4.avif"
          alt="Football"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/snowboarding-poster-neutral-3x4-1.avif"
          alt="Snowboarding"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/skateboarding-poster-neutral-3x4.avif"
          alt="Skateboarding"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/running-poster-green-3x4.avif"
          alt="Running"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/running-poster-orange-3x4-1.avif"
          alt="Running"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/universal-poster-green-3x4.avif"
          alt="Universal"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/running-poster-neutral-3x4-2.avif"
          alt="Running"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/cycling-poster-blue-3x4.avif"
          alt="Cycling"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/tennis-poster-orange-3x4.avif"
          alt="Tennis"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/football-poster-orange-3x4.avif"
          alt="Football"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/snowboarding-poster-neutral-3x4-1.avif"
          alt="Snowboarding"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/skateboarding-poster-neutral-3x4.avif"
          alt="Skateboarding"
          class="circular_slider_image"
        />
      </div>

      <div class="circular_slider_item" data-anm-circular-slider-item>
        <img
          src="https://annnimate.b-cdn.net/preview-assets/images/posters/running-poster-green-3x4.avif"
          alt="Running"
          class="circular_slider_image"
        />
      </div>
    </div>
  </div>

  <div class="circular_slider_controls">
    <button
      class="circular_slider_arrow"
      data-anm-circular-slider-prev
      aria-label="Previous slide"
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <polyline points="15 18 9 12 15 6"></polyline>
      </svg>
    </button>
    <button
      class="circular_slider_arrow"
      data-anm-circular-slider-next
      aria-label="Next slide"
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <polyline points="9 18 15 12 9 6"></polyline>
      </svg>
    </button>
  </div>
</div>
182 lines
This is just one animation
41+ more waiting for you.

Every animation production-ready. Copy the code, paste it in your project, ship it. HTML, React, and Webflow formats included.
Get Full Access
Browse All Animations
30-day money-back guarantee. No questions asked.