表情評分滑桿
拖曳滑桿時表情從哭到愛心漸變，臉部隨值變形。
拖曳滑桿時，SVG 臉的嘴角、眉毛與眼睛隨數值即時插值變形：低分哭喪流淚、中段平淡、高分綻放星星眼與飄浮愛心，主色也同步從紅漸變到綠，適合滿意度調查與回饋表單。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
50
132
<EmojiRatingSlider />
安裝
npx shadcn@latest add https://webberui.com/r/emoji-rating-slider.json或在 components.json 設定 registries 後，改用 @webberui/emoji-rating-slider 安裝。
安裝依賴後，從 registry JSON（/r/emoji-rating-slider.json 的 files[0].content）複製 emoji-rating-slider.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { EmojiRatingSlider } from "@/components/ui/emoji-rating-slider";
export function FeedbackCard() {
const [score, setScore] = React.useState(72);
return <EmojiRatingSlider value={score} onChange={setScore} />;
}Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | number | — | 受控值（0–100），未提供時為非受控模式 |
defaultValue | number | 50 | 非受控模式的初始值（0–100） |
onChange | (value: number) => void | — | 數值變更回呼，拖曳與鍵盤操作都會觸發 |
labels | string[] | 內建五級標籤 | 等級文字標籤（由低到高），用於顯示與 aria-valuetext 播報 |
faceSize | number | 132 | 表情臉的寬度（px） |
ariaLabel | string | "滿意度評分" | 滑桿的無障礙名稱 |
className | string | — | 透傳到外層容器 |
可及性
- 互動由原生
input type="range"承接，方向鍵可逐格調整、Home/End 跳至兩端 aria-valuetext以「分數 + 等級標籤」播報目前狀態，例如「85 分，非常滿意」- 表情臉與自訂拇指皆為裝飾性元素，對輔助科技隱藏（
aria-hidden） - 使用者系統開啟「減少動態效果」時，關閉 spring 平滑與眼淚、愛心等循環動畫，表情直接呈現對應狀態