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

514

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

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)

6 months ago

897
slide
slide

Author:
Omer fils ELENGA

3 weeks ago

27
Range Slider

Author:
Alok

3 years ago

14.1k
Tailwind Customize Slider
Test how to customize slider with tailwind css

Author:
yinyinkyaw

1 year ago

2.2k
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

Author:
Alok

3 years ago

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

Author:
Nikolai

1 year ago

6.5k
Card Slider

Author:
Maxim

8 months ago

1.4k
responsive slider carousel
slider carousel

Author:
Abhiraj

10 months ago

2.2k
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

6 months ago

1.2k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

6 months ago

954
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

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components