Range Slider

Tailwind CSS and Alpine JS Range Slider

Range sliders are a great way to allow users to select a value from a range of values. They can be used to indicate the current value, the minimum and maximum values, and more.

Default range slider

A simple range slider with a label.

HTML 
<div class="">
    <label for="rangeSlider" class="">Mood Meter</label>
    <input id="rangeSlider" type="range" class="" value="20" min="0" max="100" step="1" />
</div>

Range slider with ticks

A range slider with ticks for steps. Even ticks will dissapear on smaller screens.

HTML 
<div class="">
    <label for="rangeSlider" class="">Mood Meter</label>
    <input id="rangeSlider" type="range" class="" value="20" min="0" max="100" step="5" />
    <div class="">
        <span class="" aria-hidden="true">0</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span> 
        <span class="" aria-hidden="true">|</span>    
        <span class="" aria-hidden="true">100</span>
    </div>
</div>

Range slider with icons

A range slider with icon labels.

HTML 
<div class="">
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="" aria-hidden="true">
        <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8.5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707M3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707" />
    </svg>
    <label for="rangeSlider" class="">Brightness</label>
    <input id="rangeSlider" type="range" class="" value="20" min="0" max="100" step="1" />
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="" aria-hidden="true">
        <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
    </svg>
</div>

Range slider with value

Requires Alpine JS

A range slider with a value label.

HTML 
<div class="">
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="" aria-hidden="true">
        <path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM18.584 5.106a.75.75 0 0 1 1.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 0 1-1.06-1.06 8.25 8.25 0 0 0 0-11.668.75.75 0 0 1 0-1.06Z" />
    </svg>
    <label for="rangeSlider" class="">Brightness</label>
    <input id="rangeSlider" type="range" class="" min="0" max="100" step="1" />
    <span class=""></span>
</div>

Data

List of all Alpine JS data used in this component.

Property Description
currentVal Number - Current value

Keyboard Navigation

Key Action
Tab Range slider gets the focus
The value of the range slider increases
The value of the range slider decreases