# Slider
Thanh kéo chọn một giá trị trong khoảng, dùng cho âm lượng và tốc độ ngày (4/5/6 phút).

## Khi nào dùng
- Chọn giá trị liên tục hoặc theo bước trong [min, max], có thể kèm nhãn mốc.
- Cần chính xác từng đơn vị thì dùng Stepper.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mặc định | `tt-slider` | Nhãn + giá trị + thanh + mốc (tuỳ chọn) |

## Cấu trúc
```html
<div class="tt-slider" id="speed" style="--tt-slider-pct:50%">
  <div class="tt-slider__head">
    <label class="tt-slider__label" for="spd">Tốc độ ngày</label>
    <output class="tt-slider__value tt-num" for="spd">5 phút</output>
  </div>
  <input class="tt-slider__input" id="spd" type="range" min="4" max="6" step="1" value="5">
  <div class="tt-slider__marks tt-num" aria-hidden="true"><span>4 phút</span><span>5 phút</span><span>6 phút</span></div>
</div>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Thường | Rãnh `fill-muted` viền `line`, phần đã chọn `pink`, núm `pink` bóng `shadow-press` |
| Đang kéo | Núm lún 3px (`shadow-press-down`) |
| `:disabled` | opacity .4 |
| Focus | Vòng `focus-ring` 3px quanh thanh |

## Hành vi JS
```js
var s = TTMU.slider(el, { format: function (v) { return v + " phút"; }, onChange: function (v) {} });
s.value;   // số hiện tại
s.set(6);  // đặt từ code, không gọi onChange
```
- Nên ghi sẵn `style="--tt-slider-pct:…"` (= (value−min)/(max−min)) để thanh tô đúng trước khi JS chạy. JS cập nhật `--tt-slider-pct` (tô phần đã chọn trên Chrome/Safari; Firefox tô bằng `::-moz-range-progress`), chữ `.tt-slider__value` và `aria-valuetext`.
- Gắn một lần (`data-tt-bound`); trả về `{ value, set(n), destroy() }`.
- **Quy ước `onChange`:** chỉ thao tác của người dùng mới gọi `onChange`, và chỉ khi giá trị thật sự đổi; `set()` im lặng.

## Token sử dụng
`pink`, `pink-d`, `fill-muted`, `line`, `soft`, `shadow-press`, `shadow-press-down`, `radius-pill`, `radius-round`, `space-8/14`.

## Khả năng tiếp cận
- `<input type="range">` thật: mũi tên, Home/End, PageUp/PageDown dùng được; có `<label>`.
- `aria-valuetext` đọc giá trị kèm đơn vị. Chiều cao vùng chạm 44px.
- Nhãn mốc `aria-hidden` vì giá trị đã đọc qua `aria-valuetext`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đặt `step` khớp mốc (4/5/6 phút) | Bước nhỏ hơn mức người chơi phân biệt được |
| Gọi `TTMU.slider` để thanh tô đúng | Bỏ JS: phần đã chọn không được tô trên Chrome |

## Nguồn
Bổ sung có chủ đích: game không có thanh kéo. Thiết kế theo hệ thống: rãnh viền 2px, núm 3D như nút chính (`shadow-press`).