Components

Tailwind CSS Slider Components - Madhuranjan UI

Explore a curated collection of slider components built with Tailwind CSS. These interactive sliders offer intuitive range selection, step increments, and versatile sizing options, perfect for modern, responsive user interfaces.

Our slider components are designed to provide seamless user interactions for various needs. Whether you require a simple slider for single value selection, a range slider integrated with React, a step-based slider for precise adjustments, or variants that offer different sizes and disabled states, these examples showcase how to enhance your forms with dynamic and responsive sliders.

Simple Slider

A straightforward slider component for selecting a value within a given range.

1 <div class="w-full bg-white p-6 shadow-sm dark:bg-gray-900">
2      <label
3        htmlFor="colorSlider"
4        class="mb-3 block text-sm font-medium text-violet-700 dark:text-blue-300"
5      >
6        Simple Range Slider
7      </label>
8      <div class="relative">
9        <input
10          type="range"

Basic Range Slider

A basic range slider integrated with React, allowing users to select a range of values.

0100
1<div class="w-full bg-white p-3 shadow-md dark:bg-gray-800">
2  <label for="range" class="mb-4 block text-sm font-medium text-violet-700 dark:text-blue-300">Select Value: <span id="rangeValue" class="font-bold">50</span></label>
3  <input id="range" type="range" min="0" max="100" value="50" class="h-3 w-full cursor-pointer appearance-none rounded-full bg-gray-200 dark:bg-gray-700 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-violet-600 [&::-moz-range-thumb]:shadow-lg [&::-moz-range-thumb]:dark:bg-blue-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-violet-600 [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-200 [&::-webkit-slider-thumb]:hover:scale-110 [&::-webkit-slider-thumb]:hover:shadow-violet-300/50 [&::-webkit-slider-thumb]:dark:bg-blue-500 [&::-webkit-slider-thumb]:dark:hover:shadow-blue-300/50" oninput="document.getElementById('rangeValue').textContent = this.value" />
4  <div class="mt-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
5    <span>0</span>
6    <span>100</span>
7  </div>
8</div>
9

Step Range Slider

A slider component featuring step increments, ideal for precise value selection.

0102030405060708090100
1<div class="w-full bg-white p-6 shadow-md dark:bg-gray-800">
2  <label for="stepRange" class="mb-4 block text-sm font-medium text-violet-700 dark:text-blue-300">
3    Select Value: <span class="font-bold">50</span>
4  </label>
5  
6  <input
7    id="stepRange"
8    type="range"
9    min="0"
10    max="100"

Size Range Slider

A slider component available in multiple sizes to suit diverse design requirements.

1 <div class="flex items-center justify-center w-full p-5">
2  <div class="space-y-8 w-full">
3     <div>
4      <label class="mb-2 block text-sm font-medium text-violet-700 dark:text-blue-300">Small range</label>
5      <input type="range" class="range-sm h-1 w-full cursor-pointer appearance-none rounded-full bg-gray-200 dark:bg-gray-700 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-violet-600 [&::-moz-range-thumb]:dark:bg-blue-500 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-violet-600 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb]:dark:bg-blue-500" />
6    </div>
7
8     <div>
9      <label class="mb-2 block text-sm font-medium text-violet-700 dark:text-blue-300">Default range</label>
10      <input type="range" class="h-2 w-full cursor-pointer appearance-none rounded-full bg-gray-200 dark:bg-gray-700 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-violet-600 [&::-moz-range-thumb]:dark:bg-blue-500 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-violet-600 [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:dark:bg-blue-500" />

Disabled Range Slider

A slider component rendered in a disabled state to indicate non-interactivity.

1<div class="w-full bg-white p-6 shadow-md dark:bg-gray-800">
2  <label for="disabledRange" class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
3    Disabled Range Slider
4  </label>
5  <input
6    id="disabledRange"
7    type="range"
8    min="0"
9    max="100"
10    value="50"
RadioToggle Switch