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

174

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

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

2 months ago

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

2 months ago

540
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

3 months ago

567
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

5 months ago

1k
Card Slider

Author:
Maxim

4 months ago

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

2 months ago

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

Author:
yinyinkyaw

1 year ago

1.9k
Range Slider

Author:
Alok

2 years ago

13.6k
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.3k
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

3 months ago

480
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

2 years ago

11.6k
Simple range slider

Author:
Nour Haider

2 years ago

14.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components