Components · coach-admin
Matrix slider
PlannedSets values across a grid, such as sets × weeks.
- Source
components/ui/slider.tsx - Figma: not linked yet (Q13)
What it is for
Sets values across a grid, such as sets per week across a program's weeks or calories per day across a week, by dragging or typing in each cell.
Built from
- Slider per row or column, with the value shown and editable.
- Input for typing exact values.
- Table structure, so the grid has row and column headers for screen readers.
Guidelines so far
- Every value can be set with the keyboard and typed directly, not only dragged.
- In RTL the weeks run right to left; sliders fill from the right.
Replaces in coach-admin
src/components/MatrixSlider/ (68 style values).
From the read-only audit of coach-admin: 80 style values, 94 uses.
Classes and selectors
.matrix-cell__icon-wrapper7.matrix-cell__text6.matrix-slider5.matrix th,.matrix td5.matrix thead th5.matrix thead th small4.matrix-slider__level-card3.matrix tbody td2.matrix tfoot td2.matrix2.matrix-cell2.matrix thead th:first-child2
Files
src/components/MatrixSlider/matrix-slider.scss52
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$matrix-slider-scale-durationnot a color: spacing, size or layout$matrix-slider-easingnot a color: spacing, size or layout$matrix-slider-fade-durationnot a color: spacing, size or layout$matrix-slider-fade-easingnot a color: spacing, size or layout