Dual Range Slider
A copy-paste sliders & ranges component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Sliders & RangesHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-rangedual">
<div class="nuda-rangedual__track">
<div class="nuda-rangedual__fill" style="left:25%;width:45%"></div>
<div class="nuda-rangedual__thumb" style="left:25%"></div>
<div class="nuda-rangedual__thumb" style="left:70%"></div>
</div>
</div>CSS
.nuda-rangedual {
width: 100%;
max-width: 220px;
padding: 8px 12px;
}
.nuda-rangedual__track {
position: relative;
height: 4px;
background: rgba(255,255,255,.08);
border-radius: 99px;
}
.nuda-rangedual__fill {
position: absolute;
top: 0;
height: 100%;
background: linear-gradient(90deg,#e4ff54,#6ee7b7);
border-radius: 99px;
transition: left .35s cubic-bezier(.16,1,.3,1),width .35s cubic-bezier(.16,1,.3,1);
}
.nuda-rangedual__thumb {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fafafa;
border: 2px solid #e4ff54;
transform: translate(-50%,-50%);
cursor: grab;
transition: transform .25s,box-shadow .25s;
}
.nuda-rangedual__thumb:hover {
transform: translate(-50%,-50%) scale(1.2);
box-shadow: 0 0 0 5px rgba(228,255,84,.15);
}
How to use Dual Range Slider
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.