10 Tailwind Sliders

Tailwind: Sliders Components With Code

These are 10 Tailwind Upload Form components along with their HTML and Tailwind classes: Here are 10 examples of Tailwind CSS sliders:

1. Simple Slider

<div class="mx-auto h-4 w-full rounded-full bg-gray-300">
  <div class="h-4 rounded-full bg-blue-500"></div>
</div>

2. Horizontal Step Slider

<div class="relative h-2 w-full rounded-full bg-gray-300">
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 2.5rem; left: 20%;"
  ></div>
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 2.5rem; left: 50%;"
  ></div>
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 2.5rem; left: 80%;"
  ></div>
</div>

3. Range Slider

<div class="relative h-2 w-full rounded-full bg-gray-300">
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 30%; left: 15%;"
  ></div>
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 60%; left: 35%;"
  ></div>
</div>

4. Vertical Slider

<div class="flex h-20">
  <div class="relative mr-4 h-full w-2 rounded-full bg-gray-300">
    <div
      class="absolute bottom-10 h-full w-2 rounded-full bg-blue-500"
      style={{ height: "50%" }}
    ></div>
  </div>
</div>

5. Gradient Slider

<div class="h-4 w-full rounded-full bg-gradient-to-r from-red-500 via-purple-500 to-yellow-500"></div>

6. Dotted Slider

<div class="relative h-4 w-full">
  <div class="absolute top-0 left-0 grid h-full w-full grid-cols-3 gap-2">
    <div class="h-2 w-2 rounded-full bg-blue-500"></div>
    <div class="h-2 w-2 rounded-full bg-blue-500"></div>
    <div class="h-2 w-2 rounded-full bg-blue-500"></div>
  </div>
</div>

7. Labeled Slider

<div class="relative my-4 h-8 w-full">
  <div class="absolute top-0 left-0 grid h-full w-full grid-cols-3 gap-2">
    <div class="h-2 w-2 rounded-full bg-blue-500"></div>
    <div class="h-2 w-2 rounded-full bg-blue-500"></div>
    <div class="h-2 w-2 rounded-full bg-blue-500"></div>
  </div>
  <div class="mt-2 -mb-1 grid grid-cols-3 text-center">
    <div class="text-xs text-gray-500">01</div>
    <div class="text-xs text-gray-500">02</div>
    <div class="text-xs text-gray-500">03</div>
  </div>
</div>

8. Shape Slider

<div class="relative h-4 w-full rounded-full bg-gray-300">
  <div
    class="absolute top-0 left-0 h-full rounded-r-full bg-blue-500"
    style="width: 4rem;"
  ></div>
  <div
    class="absolute top-0 right-0 h-full rounded-l-full bg-blue-500"
    style="width: 4rem;"
  ></div>
</div>

9. Rounded Corner Slider

<div class="relative h-4 w-full overflow-hidden rounded-full bg-gray-300">
  <div
    class="absolute top-0 left-0 h-full rounded-full bg-blue-500"
    style="width: 4rem;"
  ></div>
</div>

10. Step Slider with Fill

<div class="relative h-2 w-full rounded-full bg-gray-300">
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 10%; left: 0%;"
  ></div>
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 20%; left: 10%;"
  ></div>
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 30%; left: 30%;"
  ></div>
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 40%; left: 60%;"
  ></div>
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 10%; right: 0%;"
  ></div>
  <div
    class="absolute h-full rounded-full bg-blue-500"
    style="width: 100%; left: 0%; opacity: 0.3;"
  ></div>
</div>

You can customize these examples according to your requirements by using different colors, sizes, and shapes, among other things.