Slider Components

Beautiful slider components built with TailwindCSS. Perfect for range inputs, volume controls, and value selection.

1. Basic Range Slider

A simple range slider with value display and smooth transitions.

<!-- Basic Range Slider -->
<div x-data="{ value: 50 }">
  <div class="max-w-md mx-auto">
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700 mb-2">Volume: <span x-text="value"></span>%</label>
      <input type="range" x-model="value" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
    </div>
  </div>
</div>

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>
<template>
  <!-- Basic Range Slider -->
  <div>
    <div class="max-w-md mx-auto">
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-2">Volume: {{ value }}%</label>
        <input type="range" v-model="value" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref(50)
</script>

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>
import React, { useState } from 'react'

export default function BasicRangeSlider() {
  const [value, setValue] = useState(50)

  return (
    <div className="max-w-md mx-auto">
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Volume: {value}%
        </label>
        <input
          type="range"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          min="0"
          max="100"
          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"
        />
      </div>
    </div>
  );
}

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>

2. Slider with Steps

A stepped slider with discrete values and visual step indicators.

1 5 10 
<!-- Slider with Steps -->
<div x-data="{ value: 5 }">
  <div class="max-w-md mx-auto">
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700 mb-2">Rating: <span x-text="value"></span>/10</label>
      <input type="range" x-model="value" min="1" max="10" step="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
      <div class="flex justify-between text-xs text-gray-500 mt-1">
        <span>1</span>
        <span>5</span>
        <span>10</span>
      </div>
    </div>
  </div>
</div>

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>
<template>
  <!-- Slider with Steps -->
  <div>
    <div class="max-w-md mx-auto">
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-2">Rating: {{ value }}/10</label>
        <input type="range" v-model="value" min="1" max="10" step="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
        <div class="flex justify-between text-xs text-gray-500 mt-1">
          <span>1</span>
          <span>5</span>
          <span>10</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref(5)
</script>

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>
import React, { useState } from 'react'

export default function SliderWithSteps() {
  const [value, setValue] = useState(5)

  return (
    <div className="max-w-md mx-auto">
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Rating: {value}/10
        </label>
        <input
          type="range"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          min="1"
          max="10"
          step="1"
          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"
        />
        <div class="flex justify-between text-xs text-gray-500 mt-1">
          <span>1</span>
          <span>5</span>
          <span>10</span>
        </div>
      </div>
    </div>
  );
}

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>

3. Slider with Tooltips

A range slider with dynamic tooltips showing the current value.

%
<!-- Slider with Tooltips -->
<div x-data="{ value: 50 }">
  <div class="max-w-md mx-auto">
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700 mb-2">Brightness: <span x-text="value"></span>%</label>
      <div class="relative">
        <input type="range" x-model="value" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
        <div class="absolute -top-8 left-0 transform -translate-x-1/2 bg-purple-600 text-white text-xs px-2 py-1 rounded" :style="`left: ${value}%`"><span x-text="value"></span>%</div>
      </div>
    </div>
  </div>
</div>

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>
<template>
  <!-- Slider with Tooltips -->
  <div>
    <div class="max-w-md mx-auto">
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-2">Brightness: {{ value }}%</label>
        <div class="relative">
          <input type="range" v-model="value" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
          <div class="absolute -top-8 left-0 transform -translate-x-1/2 bg-purple-600 text-white text-xs px-2 py-1 rounded" :style="`left: ${value}%`">{{ value }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref(50)
</script>

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>
import React, { useState } from 'react'

export default function SliderWithTooltips() {
  const [value, setValue] = useState(50)

  return (
    <div className="max-w-md mx-auto">
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Brightness: {value}%
        </label>
        <div className="relative">
          <input
            type="range"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            min="0"
            max="100"
            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"
          />
          <div
            className="absolute -top-8 left-0 transform -translate-x-1/2 bg-purple-600 text-white text-xs px-2 py-1 rounded"
            style= {{ left: `${value}%` }}
          >
            {value}%
          </div>
        </div>
      </div>
    </div>
  );
}

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>

4. Slider with Custom Track Colors

A slider with custom gradient track colors and dynamic fill.

<!-- Slider with Custom Track Colors -->
<div x-data="{ value: 50 }">
  <div class="max-w-md mx-auto">
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700 mb-2">Progress: <span x-text="value"></span>%</label>
      <div class="relative">
        <div class="w-full h-3 bg-gradient-to-r from-red-200 via-yellow-200 to-green-200 rounded-full"></div>
        <div class="absolute h-3 bg-gradient-to-r from-red-500 to-green-500 rounded-full" :style="`width: ${value}%`"></div>
        <input type="range" x-model="value" min="0" max="100" class="absolute w-full h-3 bg-transparent appearance-none cursor-pointer slider-thumb">
      </div>
    </div>
  </div>
</div>

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>
<template>
  <!-- Slider with Custom Track Colors -->
  <div>
    <div class="max-w-md mx-auto">
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-2">Progress: {{ value }}%</label>
        <div class="relative">
          <div class="w-full h-3 bg-gradient-to-r from-red-200 via-yellow-200 to-green-200 rounded-full"></div>
          <div class="absolute h-3 bg-gradient-to-r from-red-500 to-green-500 rounded-full" :style="`width: ${value}%`"></div>
          <input type="range" v-model="value" min="0" max="100" class="absolute w-full h-3 bg-transparent appearance-none cursor-pointer slider-thumb">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref(50)
</script>

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>
import React, { useState } from 'react'

export default function SliderWithCustomTrack() {
  const [value, setValue] = useState(50)

  return (
    <div className="max-w-md mx-auto">
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Progress: {value}%
        </label>
        <div className="relative">
          <div className="w-full h-3 bg-gradient-to-r from-red-200 via-yellow-200 to-green-200 rounded-full"></div>
          <div
            className="absolute h-3 bg-gradient-to-r from-red-500 to-green-500 rounded-full"
            style= {{ width: `${value}%` }}
          />
          <input
            type="range"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            min="0"
            max="100"
            className="absolute w-full h-3 bg-transparent appearance-none cursor-pointer slider-thumb"
          />
        </div>
      </div>
    </div>
  );
}

<style>
.slider-thumb::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}
</style>

5. Slider with Animation Effects

A slider with smooth animations and hover effects.

<!-- Slider with Animation Effects -->
<div x-data="{ value: 50 }">
  <div class="max-w-md mx-auto">
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700 mb-2">Animated Slider: <span x-text="value"></span>%</label>
      <div class="relative">
        <input type="range" x-model="value" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb-animated">
        <div class="absolute top-0 left-0 h-2 bg-purple-600 rounded-lg transition-all duration-300" :style="`width: ${value}%`"></div>
      </div>
    </div>
  </div>
</div>

<style>
.slider-thumb-animated::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.slider-thumb-animated::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.slider-thumb-animated::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease;
}
.slider-thumb-animated::-moz-range-thumb:hover {
  transform: scale(1.2);
}
</style>
<template>
  <!-- Slider with Animation Effects -->
  <div>
    <div class="max-w-md mx-auto">
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-2">Animated Slider: {{ value }}%</label>
        <div class="relative">
          <input type="range" v-model="value" min="0" max="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb-animated">
          <div class="absolute top-0 left-0 h-2 bg-purple-600 rounded-lg transition-all duration-300" :style="`width: ${value}%`"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref(50)
</script>

<style>
.slider-thumb-animated::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.slider-thumb-animated::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.slider-thumb-animated::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease;
}
.slider-thumb-animated::-moz-range-thumb:hover {
  transform: scale(1.2);
}
</style>
import React, { useState } from 'react'

export default function SliderWithAnimation() {
  const [value, setValue] = useState(50)

  return (
    <div className="max-w-md mx-auto">
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Animated Slider: {value}%
        </label>
        <div className="relative">
          <input
            type="range"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            min="0"
            max="100"
            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb-animated"
          />
          <div
            className="absolute top-0 left-0 h-2 bg-purple-600 rounded-lg transition-all duration-300"
            style= {{ width: `${value}%` }}
          />
        </div>
      </div>
    </div>
  );
}

<style>
.slider-thumb-animated::-webkit-slider-thumb {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.slider-thumb-animated::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.slider-thumb-animated::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease;
}
.slider-thumb-animated::-moz-range-thumb:hover {
  transform: scale(1.2);
}
</style>

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More