Skip to content
HyperUI

No results found.

Back to application components

Range Inputs

Range input slider components for volume controls, price filters, and value selectors with custom styling.

0/5 Dark Mode (Request)Updated: Nov 14, 2025

Base

Kryonn

<label for="maxVolume">
  <span class="block text-sm font-medium text-gray-900">Max Volume</span>

  <input
    type="range"
    name="maxVolume"
    id="maxVolume"
    min="0"
    max="100"
    value="20"
    class="mt-3 h-3.5 w-full appearance-none rounded-full bg-gray-300 [&::-webkit-slider-thumb]:size-7 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[6px] [&::-webkit-slider-thumb]:border-gray-500 [&::-webkit-slider-thumb]:bg-gray-200"
  />
</label>

Base with output

markmead

<label for="maxVolume">
  <span class="block text-sm font-medium text-gray-900">Max Volume</span>

  <div class="mt-3 flex items-center gap-3">
    <input
      type="range"
      name="maxVolume"
      id="maxVolume"
      min="0"
      max="100"
      value="20"
      class="h-3.5 w-full appearance-none rounded-full bg-gray-300 [&::-webkit-slider-thumb]:size-7 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[6px] [&::-webkit-slider-thumb]:border-gray-500 [&::-webkit-slider-thumb]:bg-gray-200"
    />

    <span class="text-sm/none font-medium text-gray-700">20%</span>
  </div>
</label>

Base with min and max labels

markmead

<label for="maxVolume">
  <span class="block text-sm font-medium text-gray-900">Max Volume</span>

  <input
    type="range"
    name="maxVolume"
    id="maxVolume"
    min="0"
    max="100"
    value="20"
    class="mt-3 h-3.5 w-full appearance-none rounded-full bg-gray-300 [&::-webkit-slider-thumb]:size-7 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[6px] [&::-webkit-slider-thumb]:border-gray-500 [&::-webkit-slider-thumb]:bg-gray-200"
  />

  <div class="mt-1 flex items-center justify-between">
    <span class="text-xs font-medium text-gray-700">0%</span>
    <span class="text-xs font-medium text-gray-700">100%</span>
  </div>
</label>

Native with tick marks

markmead

<label for="maxVolume">
  <span class="block text-sm font-medium text-gray-900">Max Volume</span>

  <input
    type="range"
    name="maxVolume"
    id="maxVolume"
    min="0"
    max="100"
    value="20"
    list="volumeTicks"
    class="mt-1 w-full"
  />

  <datalist id="volumeTicks">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
  </datalist>
</label>

Native with label marks

markmead

<label for="maxVolume">
  <span class="block text-sm font-medium text-gray-900">Max Volume</span>

  <input
    type="range"
    name="maxVolume"
    id="maxVolume"
    min="0"
    max="100"
    value="20"
    list="volumeTicks"
    class="mt-1 w-full"
  />

  <datalist
    id="volumeTicks"
    class="flex w-full flex-col justify-between [writing-mode:vertical-lr]"
  >
    <option value="0" label="0"></option>
    <option value="25" label="25"></option>
    <option value="50" label="50"></option>
    <option value="75" label="75"></option>
    <option value="100" label="100"></option>
  </datalist>
</label>

Related components

View all application components