Slider
The Slider lets users select a value from a continuous range by dragging a thumb along a track. In the tinnitus context this is most often a volume or frequency dial — a control that should feel smooth and unhurried, matching the calm pace of the rest of the interface. The warm sienna thumb on a subtle wheat track keeps the component grounded in the brand palette without drawing unnecessary attention.
Token source: tokens/component/slider.json
Showcase
Section titled “Showcase”Token Reference
Section titled “Token Reference”| Token | CSS custom property | Resolved value |
|---|---|---|
component.slider.track-height | --component-slider-track-height | 4px (spacing.4) |
component.slider.track-radius | --component-slider-track-radius | 9999px (radius.full) |
component.slider.track-background | --component-slider-track-background | #F9DFAE (border.subtle → pale-wheat) |
component.slider.fill-background | --component-slider-fill-background | #A55838 (action.primary → burnt-sienna-deep) |
component.slider.thumb-size | --component-slider-thumb-size | 20px (spacing.20) |
component.slider.thumb-background | --component-slider-thumb-background | #A55838 (action.primary → burnt-sienna-deep) |
component.slider.thumb-shadow | --component-slider-thumb-shadow | 0 1px 2px rgba(0,0,0,0.05) (shadow.sm) |
component.slider.thumb-border | --component-slider-thumb-border | #FFFFFF (color.white) |
component.slider.label-color | --component-slider-label-color | #7A6560 (text.secondary → muted-brown) |
component.slider.label-font-size | --component-slider-label-font-size | 12px (font-size.12) |
component.slider.focus-ring | --component-slider-focus-ring | #A55838 (focus.ring → burnt-sienna-deep) |
component.slider.disabled-opacity | --component-slider-disabled-opacity | 0.4 (opacity.disabled) |
States
Section titled “States”Default
Section titled “Default”The track renders as a pill-shaped bar in the subtle border color (border.subtle → pale-wheat). The thumb sits at the current value as a circular sienna knob with a white border and a soft drop shadow for depth.
On keyboard focus, the input receives a 2px semi-transparent sienna ring (via rgba(165, 88, 56, 0.3)). This ring is visible without being alarming — consistent with the focus treatment on inputs and buttons.
Disabled
Section titled “Disabled”The entire control reduces to 0.4 opacity and the cursor changes to not-allowed. The visual structure is preserved so the user can see the current value, even though the control is inert.
Track Fill
Section titled “Track Fill”The colored fill (highlighting the portion of the track to the left of the thumb) cannot be achieved cross-browser using CSS alone without JavaScript. The fill-background token (--component-slider-fill-background) is defined and available for use in platform implementations:
- Flutter:
Sliderwidget uses the token foractiveColor. - Web with JS: Set a CSS custom property on the element (e.g.,
--fill-pct) via aninputevent listener and use a linear-gradient on the track background. - CSS-only (Safari/Chrome only):
::-webkit-slider-runnable-trackwith a gradient. Not recommended due to Firefox incompatibility.
The showcase intentionally renders without a fill to remain honest about what CSS alone can achieve.
Usage Guidelines
Section titled “Usage Guidelines”- Tinnitus app use cases include volume control for sound therapy sessions, frequency adjustment for tinnitus masker tones, and masking level dials in the sound library.
- Label placement: Always show end labels (e.g., “0 / 100” or “Low / High”) so the scale is unambiguous. Cognitive load is already high for this audience; the user should never have to guess what the extremes mean.
- Keyboard interaction: The native
<input type="range">is keyboard-navigable out of the box — arrow keys adjust by ±1, Page Up/Down by ±10 (browser-dependent), and Home/End jump to min/max. - Step increments: Use the
stepattribute to constrain values where appropriate (e.g.,step="5"for volume in 5% increments). Finer steps increase perceived control for nuanced adjustments like frequency tuning. - Touch targets: The 20px thumb (
spacing.20) is below the 44px minimum touch target. In production, increase the thumb hit area using a transparent border or padding trick, or use a largerthumb-sizetoken override for mobile contexts.