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

377

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

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

Author:
Nikolai

1 year ago

6.2k
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.4k
Range Slider

Author:
Alok

3 years ago

13.8k
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)

4 months ago

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

Author:
yinyinkyaw

1 year ago

1.9k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

3 years ago

11.8k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

7 months ago

1.2k
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)

4 months ago

709
responsive slider carousel
slider carousel

Author:
Abhiraj

8 months ago

2.1k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

5 months ago

708
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

Author:
Muhammad Umair Arshad

5 months ago

719
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)

4 months ago

530

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components