组件 · 输入 · 10
滑块 滑块 = 4 像素轨道配 20 像素滑块并显示可读数值，用于区间选择而非精确输入。
直达修改 Prompt →
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a slider component.
STYLE
- 4px track #E5E5EA, filled portion #0071E3, 2px radius
- 20px white knob with a 1px shadow, grows to 22px while dragging
- step 1, value shown in a 12px label above the knob
- tick marks 2px tall every 25% of the range
STATES
- default, dragging, focus-visible 2px accent ring, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing slider show its value.
Use:
- a 12px label 6px above the knob, following it while dragging
- the label shows the current value, not the percentage
- keep track, knob and step unchanged
Only add the value label.
Create a slider component, replacing the existing one.
Requirements:
- 4px track, filled portion in accent, 20px knob with a 1px shadow
- knob scales to 22px during drag and returns on release
- a 12px value label follows the knob, 6px above it
- keyboard: arrows move one step, Home and End jump to the ends
- optional tick marks every 25% of the range
Keep the form layout unchanged.
MOTION
- Drag: no easing. The thumb tracks the pointer exactly.
- Release with snapping: spring, duration 0.3, bounce 0.
- Programmatic value change: thumb moves 100ms ease-out.
- prefers-reduced-motion: instant positioning.
修改类 Prompt 只动目标，不碰页面其余部分。
滑块是什么？ 滑块在一个区间里选数字。点名轨道、滑块头、步长，以及数值显示在哪里。
变体 点击属性即可在预览中高亮。
单值 只能从菜单中选择一个值的下拉。
区间 在 Prompt 里写明这个类型。
带刻度 在 Prompt 里写明这个类型。
轨道 给具体值，不要只给感觉词。
滑块头 给具体值，不要只给感觉词。
步长 给具体值，不要只给感觉词。
数值 给具体值，不要只给感觉词。
禁用 不可交互的控件，置灰且不可聚焦。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
拖动中 在 Prompt 里写明这个状态。
聚焦 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。
禁用 不可交互的控件，置灰且不可聚焦。 结构解剖 这些是 Prompt 里应该点名的部件。
01 轨道 02 已填充轨道 03 滑块头 04 数值标签 05 刻度 什么时候用 音量、透明度等连续值 带可见上下限的价格与时长筛选 手感比精度更重要的设置 什么时候别用 用户需要精确数字——改用输入框 区间内不足五个有意义档位——改用下拉 数值本身就是主要内容——直接以文字呈现 Always print the number next to the slider — nobody can tell 61 from 62 by eye.
复制 Prompt Create a slider component.
STYLE
- 4px track #E5E5EA, filled portion #0071E3, 2px radius
- 20px white knob with a 1px shadow, grows to 22px while dragging
- step 1, value shown in a 12px label above the knob
- tick marks 2px tall every 25% of the range
STATES
- default, dragging, focus-visible 2px accent ring, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui