slider models

Tailwind slider models

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Range Slider

Author QQ-VVN

Tailwind v3.4 1.8k 4

Fork Fullscreen

<div class="grid grid-cols-4 gap-6 p-6 bg-gray-900">
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Temel Slider 1</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Temel Slider 2</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-red-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Temel Slider 3</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Temel Slider 4</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-yellow-500">
  </div>
  
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">İnce Slider</label>
    <input type="range" class="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Orta Slider</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Kalın Slider</label>
    <input type="range" class="w-full h-3 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Ekstra Kalın Slider</label>
    <input type="range" class="w-full h-4 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
  </div>
  
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Gradient Slider 1</label>
    <div class="relative w-full h-2 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg">
      <input type="range" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Gradient Slider 2</label>
    <div class="relative w-full h-2 bg-gradient-to-r from-red-500 to-pink-600 rounded-lg">
      <input type="range" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Gradient Slider 3</label>
    <div class="relative w-full h-2 bg-gradient-to-r from-green-500 to-teal-600 rounded-lg">
      <input type="range" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Gradient Slider 4</label>
    <div class="relative w-full h-2 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-lg">
      <input type="range" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
    </div>
  </div>
  
  
  <div class="space-y-2">
    <div class="flex justify-between">
      <label class="text-sm font-medium text-white">Değer Göstergeli 1</label>
      <span class="text-sm text-blue-500">50%</span>
    </div>
    <input type="range" value="50" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500">
  </div>
  
  <div class="space-y-2">
    <div class="flex justify-between">
      <label class="text-sm font-medium text-white">Değer Göstergeli 2</label>
      <span class="text-sm text-red-500">75%</span>
    </div>
    <input type="range" value="75" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-red-500">
  </div>
  
  <div class="space-y-2">
    <div class="flex justify-between">
      <label class="text-sm font-medium text-white">Değer Göstergeli 3</label>
      <span class="text-sm text-green-500">25%</span>
    </div>
    <input type="range" value="25" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500">
  </div>
  
  <div class="space-y-2">
    <div class="flex justify-between">
      <label class="text-sm font-medium text-white">Değer Göstergeli 4</label>
      <span class="text-sm text-yellow-500">60%</span>
    </div>
    <input type="range" value="60" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-yellow-500">
  </div>
  
  
  <div class="space-y-2">
    <div class="flex justify-between">
      <span class="text-xs text-gray-400">0</span>
      <label class="text-sm font-medium text-white">Min-Max 1</label>
      <span class="text-xs text-gray-400">100</span>
    </div>
    <input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500">
  </div>
  
  <div class="space-y-2">
    <div class="flex justify-between">
      <span class="text-xs text-gray-400">0</span>
      <label class="text-sm font-medium text-white">Min-Max 2</label>
      <span class="text-xs text-gray-400">100</span>
    </div>
    <input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-red-500">
  </div>
  
  <div class="space-y-2">
    <div class="flex justify-between">
      <span class="text-xs text-gray-400">0</span>
      <label class="text-sm font-medium text-white">Min-Max 3</label>
      <span class="text-xs text-gray-400">100</span>
    </div>
    <input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500">
  </div>
  
  <div class="space-y-2">
    <div class="flex justify-between">
      <span class="text-xs text-gray-400">0</span>
      <label class="text-sm font-medium text-white">Min-Max 4</label>
      <span class="text-xs text-gray-400">100</span>
    </div>
    <input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-yellow-500">
  </div>
  
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Adımlı Slider 1 (5)</label>
    <input type="range" min="0" max="100" step="5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Adımlı Slider 2 (10)</label>
    <input type="range" min="0" max="100" step="10" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-red-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Adımlı Slider 3 (20)</label>
    <input type="range" min="0" max="100" step="20" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Adımlı Slider 4 (25)</label>
    <input type="range" min="0" max="100" step="25" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-yellow-500">
  </div>
  
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Özel Slider 1</label>
    <div class="relative w-full h-6 bg-gray-800 rounded-full p-1">
      <div class="absolute left-0 top-1 bottom-1 w-1/2 bg-blue-500 rounded-full"></div>
      <input type="range" value="50" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Özel Slider 2</label>
    <div class="relative w-full h-6 bg-gray-800 rounded-full p-1">
      <div class="absolute left-0 top-1 bottom-1 w-3/4 bg-red-500 rounded-full"></div>
      <input type="range" value="75" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Özel Slider 3</label>
    <div class="relative w-full h-6 bg-gray-800 rounded-full p-1">
      <div class="absolute left-0 top-1 bottom-1 w-1/4 bg-green-500 rounded-full"></div>
      <input type="range" value="25" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Özel Slider 4</label>
    <div class="relative w-full h-6 bg-gray-800 rounded-full p-1">
      <div class="absolute left-0 top-1 bottom-1 w-3/5 bg-yellow-500 rounded-full"></div>
      <input type="range" value="60" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
    </div>
  </div>
  
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Gölgeli Slider 1</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500 shadow-lg shadow-blue-500/20">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Gölgeli Slider 2</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-red-500 shadow-lg shadow-red-500/20">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Gölgeli Slider 3</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500 shadow-lg shadow-green-500/20">
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Gölgeli Slider 4</label>
    <input type="range" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-yellow-500 shadow-lg shadow-yellow-500/20">
  </div>
  
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Animasyonlu Slider 1</label>
    <div class="relative w-full h-2 bg-gray-700 rounded-lg overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-indigo-600 animate-pulse"></div>
      <input type="range" class="relative w-full h-full opacity-0 cursor-pointer z-10">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Animasyonlu Slider 2</label>
    <div class="relative w-full h-2 bg-gray-700 rounded-lg overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-r from-red-500 to-pink-600 animate-pulse"></div>
      <input type="range" class="relative w-full h-full opacity-0 cursor-pointer z-10">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Animasyonlu Slider 3</label>
    <div class="relative w-full h-2 bg-gray-700 rounded-lg overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-r from-green-500 to-teal-600 animate-pulse"></div>
      <input type="range" class="relative w-full h-full opacity-0 cursor-pointer z-10">
    </div>
  </div>
  
  <div class="space-y-2">
    <label class="text-sm font-medium text-white">Animasyonlu Slider 4</label>
    <div class="relative w-full h-2 bg-gray-700 rounded-lg overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-r from-yellow-500 to-orange-600 animate-pulse"></div>
      <input type="range" class="relative w-full h-full opacity-0 cursor-pointer z-10">
    </div>
  </div>
</div>

Related Examples

Avant & Après
Avant & Après

Omer fils ELENGA

10 months ago

925
Card Slider

Maxim

1 year ago

2.4k
card section neon
card section neon

Omer fils ELENGA

8 months ago

1.3k
omerlinkStream
omerlinkStream

Omer fils ELENGA

9 months ago

1.3k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Omer fils ELENGA

9 months ago

1k
Range Slider

Alok

4 years ago

14.6k
Galerie Interactive
Galerie Interactive

Omer fils ELENGA

8 months ago

475
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

1.7k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Muhammad Umair Arshad

1 year ago

1.4k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

282
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

646