formsIntermediate

Range Slider

A styled <input type="range"> slider with track and thumb.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a styled range slider with Tailwind: a label above, then an <input type='range'> with a custom-colored track and a circular thumb. Show the current value to the right of the label. Style the WebKit slider thumb with -webkit-appearance: none and a custom shadow.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/range-inputs/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-range-slider
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-sm p-6 w-full">
<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>
  </div>
</div>