Dual Thumb Range Slider

Colours in this gradient

• #0f172a
• #3b82f6
• #60a5fa
• #ffffff

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="range-stage">
  <div class="range-card">
    <div class="range-header">
      <div class="range-title">Monthly Budget Range</div>
      <div class="range-readout">
        $<span id="minValText">300</span> — $<span id="maxValText">1200</span>
      </div>
    </div>

    <div class="slider-box">
      <div class="slider-track-bg"></div>
      <div class="slider-track-highlight" id="trackHighlight"></div>
      <input type="range" min="100" max="2000" value="300" step="50" class="thumb thumb-left" id="minRange" />
      <input type="range" min="100" max="2000" value="1200" step="50" class="thumb thumb-right" id="maxRange" />
    </div>

    <div class="range-footer">
      <span>Min: $100</span>
      <span>Max: $2,000+</span>
    </div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a dual-thumb price range slider in HTML, CSS and vanilla JavaScript.

Requirements:
- Two overlapping range inputs sharing the same track with pointer-events: none on input and pointer-events: all on slider thumb.
- Glowing gradient highlight between min and max thumb positions.
- Live minimum and maximum formatted price text labels.
- Minimum gap enforcement between thumbs in JavaScript.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Layer two input[type='range'] elements absolutely on top of a styled background track.

2. 2

   Calculate percentage positions of min and max values in JavaScript.

3. 3

   Update highlight track left and width style properties dynamically.

Customisation tips

• Set pointer-events: none on the input container and pointer-events: auto on ::-webkit-slider-thumb to allow both handles to drag independently.

More components