Gradient Fill 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-gslider">
  <div class="nuda-gslider__track">
    <div class="nuda-gslider__fill" style="width:72%"></div>
    <div class="nuda-gslider__thumb" style="left:72%"></div>
  </div>
</div>

CSS

.nuda-gslider {
  width: 100%;
  max-width: 220px;
  padding: 10px 12px;
}

.nuda-gslider__track {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
}

.nuda-gslider__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg,#62b6ff,#9d6dff,#ff6dd4,#e4ff54);
  background-size: 200% 100%;
  border-radius: 99px;
  animation: _gradShift 4s linear infinite;
  transition: width .45s cubic-bezier(.16,1,.3,1);
}

.nuda-gslider__thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fafafa;
  transform: translate(-50%,-50%);
  cursor: grab;
  box-shadow: 0 0 0 4px rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.5);
}

@keyframes _gradShift {
  to {
    background-position: 200% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gslider__fill {
    animation: none;
  }
}

How to use Gradient Fill 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.

Copy into your project

How to use Gradient Fill Slider

More sliders & ranges components