ScoreStepper
원본: projects/skill-lens/design/components/ScoreStepper/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
목표 점수: 숫자 + 슬라이더
목표 점수를 숫자와 막대로 정합니다. 원본은 8판 .sld, .tk, .pm, .big.
쓰는 곳
목표 SRS 정하기(기본 75).
구성(화면이 넘겨줄 것)
최소, 최대, 현재 값, 단위("점").
규칙
- 숫자 64 800(폰 48), 양옆 버튼 48 원형(테 1.5
border-strong). - 막대 8, 채움 보라, 손잡이 26(흰 면 + 보라 테 7 + 그림자).
- 눈금 13 회색, 색을 입히지 않습니다.
접근성
role="slider", 좌우 화살표로 1씩.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Input" height=260 subtitle="목표 점수: 숫자 + 슬라이더" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.cap{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}.card{padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}</style>
<div class="sl stack">
<div class="card sl-score" style="max-width:360px" role="group" aria-label="목표 점수">
<div class="sl-score__top"><button class="sl-score__btn" aria-label="1점 낮추기">−</button><div class="sl-score__value">80<span class="sl-score__unit">점</span></div><button class="sl-score__btn is-focus" aria-label="1점 높이기">+</button></div>
<div class="sl-score__slider" role="slider" aria-valuemin="60" aria-valuemax="90" aria-valuenow="80"><div class="sl-score__rail"></div><div class="sl-score__fill" style="width:66.7%"></div><div class="sl-score__thumb" style="left:66.7%"></div></div>
<div class="sl-score__ticks"><span>60</span><span>70</span><span>80</span><span>90</span></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.