无需登录 数据私有 本地保存

范围滑块预设集 - 复制各种风格range CSS

14
0
0
0
CSS 已复制到剪贴板

Range 滑块预设集

精选 8 种不同风格的 CSS Range 滑块样式，涵盖极简、渐变、霓虹、玻璃拟态等多种设计趋势。点击复制即可用于你的项目。

一键获取全部 8 种预设 CSS
极简蓝线 Minimal
0 50 100 
.rs-minimal {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 24px;
}
.rs-minimal::-webkit-slider-runnable-track {
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
}
.rs-minimal::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: #3b82f6;
  border-radius: 50%;
  margin-top: -7.5px;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.rs-minimal::-moz-range-track {
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
}
.rs-minimal::-moz-range-thumb {
  width: 18px; height: 18px;
  background: #3b82f6;
  border-radius: 50%;
  border: 3px solid #fff;
}
渐变紫粉 Gradient
0 50 100 
.rs-gradient {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 28px;
}
.rs-gradient::-webkit-slider-runnable-track {
  height: 7px;
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  border-radius: 10px;
}
.rs-gradient::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  margin-top: -7.5px;
  border: 3px solid #a855f7;
  box-shadow: 0 2px 8px rgba(168,85,247,0.35);
}
.rs-gradient::-moz-range-track {
  height: 7px;
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  border-radius: 10px;
}
.rs-gradient::-moz-range-thumb {
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid #a855f7;
}
霓虹青辉 Neon
0 50 100 
.rs-neon {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 30px;
}
.rs-neon::-webkit-slider-runnable-track {
  height: 5px;
  background: #1e3a3f;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(6,182,212,0.3);
}
.rs-neon::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: #06b6d4;
  border-radius: 50%;
  margin-top: -8.5px;
  border: none;
  box-shadow: 0 0 16px #06b6d4, 0 0 32px rgba(6,182,212,0.6);
}
.rs-neon::-moz-range-track {
  height: 5px;
  background: #1e3a3f;
  border-radius: 4px;
}
.rs-neon::-moz-range-thumb {
  width: 22px; height: 22px;
  background: #06b6d4;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 16px #06b6d4;
}
圆润桃粉 Cute
0 50 100 
.rs-cute {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 32px;
}
.rs-cute::-webkit-slider-runnable-track {
  height: 10px;
  background: #fce7f3;
  border-radius: 20px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.rs-cute::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  background: #f472b6;
  border-radius: 50%;
  margin-top: -8px;
  border: 4px solid #fff;
  box-shadow: 0 3px 10px rgba(244,114,182,0.4);
}
.rs-cute::-moz-range-track {
  height: 10px;
  background: #fce7f3;
  border-radius: 20px;
}
.rs-cute::-moz-range-thumb {
  width: 26px; height: 26px;
  background: #f472b6;
  border-radius: 50%;
  border: 4px solid #fff;
}
暗夜绿光 Tech
0 50 100 
.rs-darktech {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 26px;
}
.rs-darktech::-webkit-slider-runnable-track {
  height: 4px;
  background: #334155;
  border-radius: 0;
}
.rs-darktech::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 22px;
  background: #10b981;
  border-radius: 3px;
  margin-top: -9px;
  border: none;
  box-shadow: 0 0 6px rgba(16,185,129,0.5);
}
.rs-darktech::-moz-range-track {
  height: 4px;
  background: #334155;
  border-radius: 0;
}
.rs-darktech::-moz-range-thumb {
  width: 16px; height: 22px;
  background: #10b981;
  border-radius: 3px;
  border: none;
}
玻璃冰透 Glass
0 50 100 
.rs-glass {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 30px;
}
.rs-glass::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(255,255,255,0.45);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08),
              inset 0 1px 2px rgba(255,255,255,0.6);
}
.rs-glass::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  margin-top: -9px;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12),
              0 0 0 4px rgba(148,163,184,0.15);
}
.rs-glass::-moz-range-track {
  height: 6px;
  background: rgba(255,255,255,0.45);
  border-radius: 8px;
}
.rs-glass::-moz-range-thumb {
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
}
复古铜色 Retro
0 50 100 
.rs-retro {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 28px;
}
.rs-retro::-webkit-slider-runnable-track {
  height: 7px;
  background: linear-gradient(180deg, #d4c5b9 0%, #c4b5a5 40%, #b8a898 100%);
  border-radius: 4px;
  border: 1px solid #a89888;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.rs-retro::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: linear-gradient(180deg, #f5ebe0 0%, #d4b896 100%);
  border-radius: 50%;
  margin-top: -7.5px;
  border: 2px solid #a08060;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.rs-retro::-moz-range-track {
  height: 7px;
  background: linear-gradient(180deg, #d4c5b9, #c4b5a5, #b8a898);
}
.rs-retro::-moz-range-thumb {
  width: 20px; height: 20px;
  background: linear-gradient(180deg, #f5ebe0, #d4b896);
  border-radius: 50%;
  border: 2px solid #a08060;
}
锐利黑金 Sharp
0 50 100 
.rs-sharp {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 26px;
}
.rs-sharp::-webkit-slider-runnable-track {
  height: 4px;
  background: #1a1a1a;
  border-radius: 1px;
}
.rs-sharp::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 20px;
  background: #f59e0b;
  border-radius: 2px;
  margin-top: -8px;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.rs-sharp::-moz-range-track {
  height: 4px;
  background: #1a1a1a;
  border-radius: 1px;
}
.rs-sharp::-moz-range-thumb {
  width: 14px; height: 20px;
  background: #f59e0b;
  border-radius: 2px;
  border: none;
}

常见问题与知识点

自定义 range 滑块需要先清除浏览器默认样式（appearance: none），然后分别对轨道（track）和滑块（thumb）使用伪元素进行样式设置。Chrome/Safari 使用 ::-webkit-slider-runnable-track 和 ::-webkit-slider-thumb，Firefox 使用 ::-moz-range-track 和 ::-moz-range-thumb。本页面的 8 种预设均提供完整的跨浏览器 CSS 代码。

Firefox 提供了专属的 ::-moz-range-progress 伪元素，可以单独设置滑块左侧（已选部分）的轨道样式。Chrome 目前不支持该特性，但可以通过在 ::-webkit-slider-runnable-track 上使用 linear-gradient 结合 CSS 变量来模拟进度填充效果，需要少量 JavaScript 动态更新变量值。
最常见的原因是：① 忘记设置 appearance: none（包括 -webkit-appearance: none）；② 只写了 Webkit 伪元素而忽略了 Firefox 的 ::-moz-range-* 系列；③ thumb 的 margin-top 计算错误导致滑块与轨道错位，通常需要根据 (轨道高度 - thumb高度) / 2 来设置负 margin。

根据 Apple 和 Google 的交互设计规范，触控目标的最小推荐尺寸为 44×44px（iOS HIG）或 48×48px（Material Design）。建议 range 滑块的 thumb 至少达到 20-28px，并通过 box-shadow 或 border 扩展可点击区域。本页面的"圆润桃粉"风格使用 26px 的 thumb，在移动端触控体验良好。

纯 CSS 可以使用 <datalist> 标签配合 list 属性添加刻度标记，但样式自定义受限。更灵活的方式是使用绝对定位的 <div> 元素在轨道上放置刻度线和标签，配合 JavaScript 动态更新当前值。也可以使用 CSS background 的 repeating-linear-gradient 在轨道上绘制刻度线图案。

所有预设 CSS 代码均可免费用于个人和商业项目，无需署名。兼容性方面：Chrome/Edge 80+、Safari 12+、Firefox 70+ 均可完美呈现。部分 CSS 属性（如 backdrop-filter 用于玻璃拟态风格）在旧版浏览器中会降级为不透明效果，不影响功能使用。
🔧 相关工具