Horizontal Slider + Scroll %
Use arrow keys or drag the slider (1–100). Scroll inside the box to see the exact scrolling percentage under the scrollbar.
Practice Panel
Set focus on the slider and use ArrowLeft/ArrowRight, or drag with mouse.
Scroll inside the container to update the percentage and progress bar.
Scrollable Area
This is a scroll container used for automation practice. Scroll down to increase the percentage.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget finibus justo.
Sed tincidunt, risus a iaculis dignissim, justo sem convallis odio, sed dignissim neque neque sed arcu.
Integer at sapien at metus lacinia feugiat. Nulla facilisi.
Curabitur ut faucibus justo. Mauris sit amet velit eu libero tempor commodo.
Morbi euismod magna sed purus posuere, at molestie odio laoreet.
Aliquam erat volutpat. Donec volutpat urna id sem hendrerit, vitae porttitor metus bibendum.
Proin porttitor felis in metus commodo, et gravida justo ultrices.
Phasellus ac sapien sed nisl porttitor faucibus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Ut at justo sed urna mattis interdum.
Donec nec orci vitae nibh viverra porta. Donec in dui vitae justo suscipit aliquet.
Etiam vel ligula vitae libero viverra molestie.
Nam nec lacus vitae ipsum porta sollicitudin.
End of content.
0.00%
[data-testid="slider-value"] and [data-testid="scroll-percent"].