Range row
An amount: the label, the slider and its value.
openvibe-shared/kitJSON
Build it
'<form class="ovk-form">' + kit.rangeRow({ name: 'volume', label: 'Alert volume', value: 60 }) + '</form>'Props
max- number?
min- number?
name- any
step- number?
unit- string?
label- any
value- number?
Anatomy
- rangeRowAn amount: the label, the slider and its value.
Behaviour and access
- Keyboard
- Keeps the focused control in view
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- Remove movement; keep the state change.
- Name
- Range row
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
Tokens
color.bg.raisedsize.tap
Android · Jetpack Compose
Material 3 Range row
Use Range row in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Range row in SwiftUI with the shared tokens.
Markup
Default
<form class="ovk-form"><label class="ovk-set-row ovk-set-range"><span class="ovk-set-text">Alert volume</span><input type="range" name="volume" min="0" max="100" step="5" value="60" data-ovk-unit="%" aria-valuetext="60 percent"></label></form>