id: mobile-volume-slider
category: mobile
difficulty: obvious
prompt: |
  Design ONLY a volume slider control at 60%: a horizontal track
  with a filled blue portion on the left (about 60% of the track),
  a circular white thumb (about 20px) with an accent border at
  the meeting point, and the remaining slate-colored portion on
  the right. Above the track, show "Volume" on the left and "60%"
  on the right in a single row. Do NOT include other settings
  rows, icons, or surrounding page content — just the one slider
  row.
expected:
  must_contain_roles:
    - range-slider
    - range-slider-track
    - range-slider-fill
    - range-slider-thumb
    - range-slider-remaining
    - range-slider-value
expected_tool_if_any: add_range_slider_v0
