区间滑块（Range Slider）是什么：效果预览与 AI 设计提示词

效果预览

¥1,200

¥0团队报价

适合用在哪

价格筛选、用量估算（定价页）、音量/亮度控制。

容易踩的坑

隐藏原生 range 后自绘滑块，丢失方向键微调和读屏的 aria-valuenow 播报。
滑块直径小于 24px 时移动端拖动困难，手指还会挡住上方的数值气泡。
拖动过程中每帧都重算价格并发请求，造成卡顿，应节流或松手再计算。

设计提示词 · Prompt

区间滑块（Range Slider）：轨道 4-6px 高、圆角 999px，已选区间用品牌色填充、未选部分浅灰（用 linear-gradient 按百分比拼接）。滑块 18-22px 圆形、白底 + 2px 品色描边 + 投影，悬停放大 10%。滑块正上方浮一个深色气泡显示当前值（气泡下带一个小三角）。定价页用法：拖动滑块联动下方价格实时重算，松手时数字做一次 count-up 动画。双滑块（区间选择）在两端各放一个 thumb，禁止交叉。

Range Slider: track 4-6px high, border radius 999px; the selected range is filled with brand color and the unselected part is light gray (concatenated by percentage using linear-gradient). The thumb is an 18-22px circle with a white background + 2px brand-color border + drop shadow, scaling up 10% on hover. A dark bubble floats directly above the thumb showing the current value (with a small triangle below the bubble). Pricing page usage: dragging the slider recalculates the price below in real time, and on release the number plays a count-up animation. A dual slider (range selection) places a thumb at each end, which must not cross.

常见搭配

同一页面里经常和「区间滑块」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

用量滑块定价Usage Slider Pricing 数字滚动计数Odometer / Count-up Animation 筛选标签Filter Chips

演示 HTML 结构

<div class="s">
  <div class="d-range">
    <span class="d-range__bubble">¥1,200</span>
    <div class="d-range__track"><span class="d-range__thumb"></span></div>
    <div class="d-range__ends"><span>¥0</span><span>团队报价</span></div>
  </div>
</div>