Slider
슬라이더는 네이티브 <input type="range">입니다. 컴포넌트는 없습니다. 화살표 키, Page Up과 Page Down, Home과 End는 브라우저가 이미 처리하고 값도 읽어 줍니다. Todae는 todae.base 레이어에서 slider contract 토큰으로 accent-color를 정하고, 브라우저가 그 색으로 손잡이와 채워진 트랙을 칠합니다. 그 색이 컨트롤의 어디까지 닿는지는 브라우저마다 다릅니다.
40%
<Label htmlFor="volume">Volume</Label>
<input id="volume" type="range" min={0} max={100} step={5} value={value} onChange={onChange} />
Label로 이름을 붙이고, 정확한 숫자가 중요하면 현재 값을 근처에 텍스트로 보여 주세요. slider.fill과 slider.ring.focus로 스타일을 바꾸세요. 범위를 고르는 손잡이 두 개짜리 슬라이더는 네이티브가 아니며 아직 Todae에 없습니다.
언제 쓰나요
쓸 때: 볼륨이나 확대처럼 정확한 숫자보다 대략적인 위치가 중요한 범위 안의 값을 고를 때.
쓰지 않을 때: 정확한 숫자 → type="number"인 Field.TextInput. 이름 붙은 몇 가지 선택지 → Radio. 사용자가 조절하지 않는 진행 상황 → Progress.