Custom Range Slider

Restyle the native range input: filled track + round thumb

All platformsMotion & BackgroundsContent areaEffect

Live preview (drag the parameters, watch it change)

Code

<input type="range" min="0" max="100" value="62"
  oninput="this.style.setProperty('--v', this.value + '%')">
<style>
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 99px;
  background: linear-gradient(90deg, #141414 var(--v, 62%), #E3E0D8 var(--v, 62%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; border: 2px solid #141414; margin-top: -8px; }
input[type=range]::-moz-range-progress { background: #141414; height: 5px; border-radius: 99px; }
input[type=range]::-moz-range-thumb { width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 2px solid #141414; }
</style>

<input type="range" class="w-full accent-neutral-900">
<!-- 只求能用：accent-color 一行搞定；要精细样式再换 html-css 档的伪元素写法 -->

export function VolumeSlider() {
  const [v, setV] = React.useState(62);
  return <input type="range" min={0} max={100} value={v}
    onChange={(e) => setV(+e.target.value)}
    style={{ accentColor: "#141414", width: "100%" }} />;
}
/* 精细样式（填充轨道 + 自定义滑块）见 html-css 档的伪元素写法 */

Code snippets are MIT-licensed — copy and adapt freely.

How this effect works

它是怎么工作的（中文）

原生 input[type=range] 能用但难看。WebKit 要写 ::-webkit-slider-thumb 和轨道伪元素，填充进度靠一个 CSS 变量或 range-progress（Firefox）。滑块热区至少 24px——看得见的部分可以小，点得中的范围不能小，这是费茨定律的现场应用。

How it works (English)

Native input[type=range] works but looks dated. WebKit needs ::-webkit-slider-thumb and track pseudo-elements; the filled portion comes from a CSS variable (or Firefox's range-progress). Keep the hit area at least 24px — the visible thumb can be small, the tappable area cannot. Fitts's Law, applied.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

Matching prompt

Custom Range Slider PromptStale · →