Home
QQ-VVN
slider models

slider models

Tailwind slider models

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

Range Slider

Author QQ-VVN

754

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

omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

3 weeks ago

201
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

1 month ago

294
Tailwind Customize Slider
Test how to customize slider with tailwind css

Author:
yinyinkyaw

1 year ago

2.4k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

3 weeks ago

41
Range Slider
Also, shows the current value of the slider while it is being slid

Author:
Nikolai

1 year ago

6.8k
PlayStore Style Carousel
PlayStore Style Carousel

Author:
Omer fils ELENGA

3 days ago

24
Galerie Interactive
Galerie Interactive

Author:
Omer fils ELENGA

3 days ago

10
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.5k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

8 months ago

1.1k
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.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

892
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1k
slide
slide

Author:
Omer fils ELENGA

2 months ago

198

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components