Hue 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-hue">
<div class="nuda-hue__track">
<div class="nuda-hue__thumb" style="left:40%"></div>
</div>
</div>CSS
.nuda-hue {
width: 100%;
max-width: 220px;
padding: 10px 12px;
}
.nuda-hue__track {
position: relative;
height: 10px;
border-radius: 99px;
background: linear-gradient(90deg,#ff5e7a,#ffb45e,#e4ff54,#6ee7b7,#62b6ff,#9d6dff,#ff6dd4,#ff5e7a);
}
.nuda-hue__thumb {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fafafa;
border: 3px solid #0c0c10;
transform: translate(-50%,-50%);
cursor: grab;
box-shadow: 0 0 0 1px rgba(255,255,255,.4),0 4px 12px rgba(0,0,0,.5);
transition: transform .25s;
}
.nuda-hue__thumb:hover {
transform: translate(-50%,-50%) scale(1.15);
}
How to use Hue 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.