Range Component
A smooth, accessible range slider component built with native HTML input elements and Tailwind CSS. Capture numerical input with draggable handles, step increments, and custom styling. Supports multiple sizes and color variants for settings panels, filters, and interactive data controls.
Range components allow users to select a numeric value within a defined range using an interactive slider. Built with native HTML range inputs and smooth styling, range sliders provide intuitive control over continuous values. The Frutjam range system supports multiple sizes, colors, and states—ideal for volume controls, price filters, and timeline scrubbing.
| Class | Type | Description |
|---|---|---|
| range | Base | Styled range slider input |
| range-xs | Size | Extra small |
| range-sm | Size | Small |
| range-md | Size | Medium (default) |
| range-lg | Size | Large |
| range-xl | Size | Extra large |
| range-primary | Color | Primary theme color |
| range-secondary | Color | Secondary theme color |
| range-accent | Color | Accent theme color |
| range-neutral | Color | Neutral theme color |
| range-info | Color | Info semantic color |
| range-success | Color | Success semantic color |
| range-warning | Color | Warning semantic color |
| range-error | Color | Error semantic color |
Basic Usage
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
Range Sizes
html
1 2 3 4 5 | <input type="range" min="0" max="100" value="40" class="range range-xs"> <input type="range" min="0" max="100" value="40" class="range range-sm"> <input type="range" min="0" max="100" value="40" class="range range-md"> <input type="range" min="0" max="100" value="40" class="range range-lg"> <input type="range" min="0" max="100" value="40" class="range range-xl"> |
Range Colors
html
1 2 3 4 5 6 7 8 | <input type="range" min="0" max="100" value="40" class="range"> <input type="range" min="0" max="100" value="40" class="range range-primary"> <input type="range" min="0" max="100" value="40" class="range range-secondary"> <input type="range" min="0" max="100" value="40" class="range range-accent"> <input type="range" min="0" max="100" value="40" class="range range-info"> <input type="range" min="0" max="100" value="40" class="range range-success"> <input type="range" min="0" max="100" value="40" class="range range-warning"> <input type="range" min="0" max="100" value="40" class="range range-error"> |
Range with Steps
html
1 2 3 | <input type="range" min="0" max="100" step="10" value="40" class="range"> <input type="range" min="0" max="100" step="5" value="40" class="range range-primary"> <input type="range" min="0" max="100" step="1" value="40" class="range range-secondary"> |
Range with Label
html
1 2 3 4 5 6 7 8 9 | <label> <span class="block text-sm font-medium mb-2">Volume</span> <input type="range" min="0" max="100" value="70" class="range range-primary"> </label> <label> <span class="block text-sm font-medium mb-2">Price Range: $20 - $80</span> <input type="range" min="0" max="100" value="50" class="range"> </label> |
Disabled Range
html
<input type="range" min="0" max="100" value="40" class="range" disabled> |
Range with Marks
0
25
50
75
100
html
1 2 3 4 5 6 7 8 9 10 | <div> <div class="flex justify-between text-xs mb-2"> <span>0</span> <span>25</span> <span>50</span> <span>75</span> <span>100</span> </div> <input type="range" min="0" max="100" value="50" class="range range-primary w-full"> </div> |