Tailwind range

Range built with the latest Tailwind. Pick values from a range, using a customizable slider.


Empty

1
2
3
4
5
<div class="relative pt-1">
  <div
    class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200"
  ></div>
</div>

Filled

1
2
3
4
5
6
7
8
<div class="relative pt-1">
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200">
    <div
      style="width: 30%"
      class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500"
    ></div>
  </div>
</div>

With marker

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="px-6 w-full">
  <div class="bg-gray-300 h-2 w-full rounded-full relative">
    <span
      class="bg-white h-4 w-4 absolute top-0 -ml-2 -mt-1 z-10 shadow rounded-full cursor-pointer"
      style="left: 50%"
    ></span>
    <span
      class="bg-green-500 h-2 absolute left-0 top-0 rounded-full"
      style="width: 50%"
    ></span>
  </div>
  <div class="flex justify-between mt-2 text-xs text-gray-600"></div>
</div>

Percentage

0% 25% 50% 75% 100%
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="px-6 w-full">
  <div class="bg-gray-300 h-2 w-full rounded-full relative">
    <span
      class="bg-white h-4 w-4 absolute top-0 -ml-2 -mt-1 z-10 shadow rounded-full cursor-pointer"
      style="left: 50%"
    ></span>
    <span
      class="bg-purple-500 h-2 absolute left-0 top-0 rounded-full"
      style="width: 50%"
    ></span>
  </div>
  <div class="flex justify-between mt-2 text-xs text-gray-600">
    <span class="w-8 text-left">0%</span>
    <span class="w-8 text-center">25%</span>
    <span class="w-8 text-center">50%</span>
    <span class="w-8 text-center">75%</span>
    <span class="w-8 text-right">100%</span>
  </div>
</div>

Steps

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="w-full px-4 sm:px-8">
  <div class="h-2px w-full bg-gray-300 relative">
    <div
      class="absolute top-1/2 left-0 h-1 transform -translate-y-1/2 bg-blue-400 transition-width ease-in-out duration-500"
      style="width: 66.6667%"
    >
      <div
        class="w-3 h-3 bg-blue-800 rounded-full absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2"
      ></div>
    </div>
  </div>
  <div class="mt-3 relative hidden sm:block">
    <div class="absolute" style="left: 0">
      <span
        class="inline-block transform -translate-x-1/2 text-sm font-medium text-blue-400 cursor-pointer"
        >Amount</span
      >
    </div>
    <div class="absolute" style="left: 33.3333%">
      <span
        class="inline-block transform -translate-x-1/2 text-sm font-medium text-blue-400 cursor-pointer"
        >Time</span
      >
    </div>
    <div class="absolute" style="left: 66.6667%">
      <span
        class="inline-block transform -translate-x-1/2 text-sm font-medium cursor-pointer"
        >Day</span
      >
    </div>
    <div class="absolute" style="left: 100%">
      <span
        class="inline-block transform -translate-x-1/2 text-sm cursor-pointer"
        >Year</span
      >
    </div>
  </div>
</div>