Slider · Bugwise

Drag the volume in Control Center, set a price range in a hotel app, scrub through a podcast, choose how spicy your curry should be in a food delivery app: all sliders. They feel natural because you move to a value instead of typing it.

That’s also why they’re tricky. A slider turns finger movement into numbers, and every step of that translation (pixels, steps, rounding, limits) is a place for bugs. Here’s how to test one properly.

What is a slider?

A slider is a control where you drag a thumb along a track to choose a value between a minimum and a maximum. The position of the thumb is the value: far left is the minimum, far right the maximum (mirrored in right-to-left languages).

Sliders come in two pairs of flavors:

Continuous vs discrete. A continuous slider allows any value in between (volume, brightness). A discrete slider snaps to steps: 1 km, €10, 0.5 stars. Discrete sliders often show tick marks (Material calls them stops) for each step.
Single vs range. A single slider has one thumb and picks one value. A range slider has two thumbs and picks a low and a high value, like €40 – €180 in a price filter.

You’ll usually see sliders used for:

Settings you judge by feel: volume, brightness, text size, photo filters.
Filters with a range: price, distance, flight departure time.
Media playback: the seek bar in video and audio players.
Small scales: spice level, tip percentage, rating “4★ and up”.

Anatomy

Price per night

€140€0€200416325

1
Track (inactive)
The full line from minimum to maximum. Its length is the whole range of possible values.
2
Active track
The filled part. In a single slider it runs from the minimum to the thumb; in a range slider, between the two thumbs.
3
Thumb (handle)
What you drag. Its visible size can be small, but its touch area should be at least 44 pt / 48 dp.
4
Value label
Shows the current value while dragging, or permanently next to the slider. Needs units and sensible rounding.
5
Tick marks (stops)
Only on discrete sliders. Each tick is one allowed value (one step).
6
Min / max labels
Tell users the limits. Both ends must actually be reachable.

How it differs from similar components

A slider is fast and visual, but imprecise. Knowing the alternatives helps you spot when the wrong one was used.

Component	Precision	Best for
Slider	Rough, by feel	Relative values and ranges: volume, price filter
Stepper (− / +)	Exact, small changes	Quantities: 1–10 tickets, guests, servings
Text field (number)	Exact, any value	Age, amount to transfer, exact price
Segmented control	One of 2–5 options	Named levels: Mild · Medium · Hot
Toggle switch	On / off	One setting that takes effect immediately

Dev note

Apple and Google both call it a slider. Android’s older view is called SeekBar, which is also what many people call the timeline in a video player. Material has a separate RangeSlider, and on the web you’ll see <input type="range"> or a custom “range slider”. In bug reports, use the name your team uses.

Designs & variants

Each platform draws sliders differently: a round white thumb on iOS, a thick track with a slim vertical handle in Material 3, whatever the design system decided on the web.

Every slider here works. Drag the thumbs, then click one and try the keyboard: arrows, Page Up / Page Down, Home and End.

Volume 60%

Continuous slider

iOS

No steps: any value between min and max. Fine for volume or brightness, where the exact number doesn't matter and you judge by feel.

Search radius: 5 km

Discrete slider with stops

Android · Material 3

Snaps to steps (here 1 km), and the dots show every allowed value. The value indicator appears while you drag.

Price€40 – €180

Range slider (two thumbs)

Android · Material 3

Picks a low and a high value, like a price filter. The thumbs must never pass each other, and each needs its own accessible name.

Brightness70%

Native range input

Web

A real <input type="range">. Keyboard, screen readers and touch work out of the box; styling the thumb differs per browser.

Price

Min €Max €

Range slider + text fields

Web

The fix for 'I need exactly €95': drag for a rough range, type for an exact one. Both stay in sync, and typed values are clamped and ordered.

1:243:45

Seek bar

Video · audio players

A slider whose value is a time. The lighter part shows what's already buffered. Screen readers should hear '1 minute 24 seconds of 3 minutes 45 seconds', not '84'.

When to use it

A slider is a good choice when:

The exact value matters less than the rough position: “louder”, “cheaper”, “a bit brighter”.
The range is bounded and known: 0–100 %, €0–€300, 1–10 km.
Users benefit from immediate visual feedback while they move (brightness preview, photo filter).
For a range (low and high value), a two-thumb slider is compact, ideally paired with text fields for exact input.

Good and bad uses

Relative values you judge by feel

Brightness

Users don’t think “65 %”; they drag until the screen looks right.

Exact values like age

Age: 34

82 possible values squeezed into a few centimeters. Hitting “34” takes several tries. Use a number field or a date of birth instead.

Exact amount: type it

Amount to send

€ 250.00

A text field with a numeric keyboard. Exact, quick, and easy to correct.

Money on a slider

Amount to send: €247.31

Half a million possible values on one track. Users will never land on €250.00, and a twitch of the finger sends the wrong amount.

Show the value and the limits

Text size120 %

Label, current value and steps are all visible. Users know where they are.

A mystery track

No label, no value, no hint what left and right mean. Users have to experiment to find out what it does.

Common bugs

#	Bug	What you see	Typical severity
1	End value unreachable	On a €0–€249 slider with €10 steps, the thumb stops at €240; the most expensive product never shows	High
2	Range thumbs cross	The minimum is dragged past the maximum: “€200 – €90” and zero results	Medium
3	Floating-point noise	The label says “0.30000000000000004” or “19.999999” instead of “0.3” or “20”	Low–Medium
4	Request flood	Every pixel of dragging sends an API call; the list flickers and the server gets hammered	Medium
5	No keyboard support	Tab can’t reach the thumb, or arrow keys do nothing	High (for affected users)
6	Screen reader says a bare number	“40” instead of “€40”, “0.35” instead of “35 %”, or nothing but “slider”	Medium–High
7	Value and thumb out of sync	After Reset the label says €0 but the thumb is still in the middle	Medium
8	Tiny thumb	Hard to grab; you scroll the page or hit the other thumb instead	Medium
9	Gesture conflicts	Dragging the slider also swipes back, scrolls a carousel or closes a bottom sheet	Medium
10	Not mirrored in RTL	In Arabic or Hebrew, the minimum is on the left, or arrow keys move the wrong way	Medium

Why #1 and #3 happen

Steps and limits don’t always fit. If (max − min) isn’t a multiple of the step, the last step falls short of the max. That’s exactly how a native <input type="range"> behaves: with min 0, max 249 and step 10, the highest value is 240. It’s the slider version of an off-by-one error, and you find it with boundary value analysis: always drag to both ends.

Computers can’t store 0.1 exactly. In JavaScript, Swift and Kotlin alike, 0.1 + 0.2 gives 0.30000000000000004. A slider that calculates 3 × 0.1 and shows the raw result displays noise, and worse, a filter “rating ≥ 4.800000000000001” silently hides a 4.8★ product. Always test decimal steps.

Stress-test it

Push the slider to its limits: odd steps, decimal steps, a range of exact values, tiny touch areas and right-to-left layout. Drag both thumbs into each other and all the way to both ends.

🧪 Stress-test playground

Change the range, the step and the math, then drag the thumb all the way to both ends. Watch the readouts below the slider.

Range

Step

Thumbs

Rounding math

Thumb touch area: 44px

Style

Right-to-left (Arabic, Hebrew)

Price€100

€0€249

aria-valuenow

100

Screen reader hears

“Price, €100, adjustable”

Events

0 change events · 0 committed values

An app that calls the server on every change event would have sent 0 requests. Apply on release or debounce.

Max €249 is unreachable. 249 isn't a multiple of 10, so the last stop is €240. That's what a native <input type="range"> does too. Ask what should happen.

Find the bug

The running shoe shop below has a filter panel with six bugs. Explore it like a real tester:

Drag each thumb all the way to both ends, slowly and quickly.
Drag the two price thumbs into and past each other.
Read every label and every request in the network log.
Put the mouse away and use only the keyboard (Tab, arrows, Home, End).
Turn on the screen reader in the device settings and Tab through the filters.

🐞 Bug hunt: Running shoes filter

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Running shoes

12 products · prices from €39 to €249

Filters

Price€0 – €249

€0€249

Min. ratingAny

Showing 12 of 12

Pace Runner 2 3.6€39
Daily Trainer 4.1€49
Trail Grip Lite 3.9€59
City Jogger 3.2€65
Cloud Step 4.4€79
Tempo Fly 4.8€89
Marathon Max 4.5€99
Road Racer 3 4.2€119
Ultra Cushion 4.6€129
Carbon Sprint 4.3€149
Summit Trail GTX 4.7€189
Elite Carbon Pro 4.9€249

Device settings

Screen reader (VoiceOver captions)

Network log0 requests

Change a filter to see API requests…

1
Hint: Drag the right price thumb away from the end, then all the way back. Count the shoes.
The maximum price cannot be reached
The range is €0–€249, but the step is €10, so the thumb snaps to the last full step: €240. It never touches the end of the track, the €249 Elite Carbon Pro disappears, and the list says "Showing 11 of 12" even with both thumbs at the ends. Expected: both ends are reachable (the max is a valid stop, or the range is 0–250). A classic boundary bug.
2
Hint: Move the right price thumb to the middle, then drag the left thumb to the right, past it.
Price thumbs can cross (min > max)
The minimum thumb slides past the maximum. The label shows something like "€200 – €90", the request is sent with min=200&max=90 and the list is empty. Expected: the thumbs stop at each other (or swap roles), so min is always ≤ max.
3
Hint: Drag Min. rating slowly and read the label and the network log. Then try exactly 4.8.
Rating label shows floating-point noise
Values are calculated as steps × 0.1 and shown unrounded: "★ 3.5000000000000004+", rating=0.30000000000000004. It's not only cosmetic: at 4.8 the app filters with 4.800000000000001, so the 4.8★ Tempo Fly vanishes. Expected: values rounded to one decimal before showing, sending or comparing.
4
Hint: Press Tab until a price thumb is focused, then press the arrow keys, Page Up, Home and End.
Price thumbs ignore the keyboard
The thumb gets a focus ring, but no key does anything. Keyboard users can't change the price at all. The rating slider works, which proves it can be done. Expected (ARIA slider pattern): arrows change by one step, Page Up/Down by a bigger step, Home/End jump to min/max.
5
Hint: Drag a price thumb across the track and watch the network log.
Dragging the price sends a request for every pixel
One drag sends dozens of requests (max=230, max=220, max=210…) and the list keeps flickering. This wastes data and battery and can trip the server's rate limit. Expected: apply the price when the user lets go, like the rating slider does (one request), or debounce it.
6
Hint: Turn on the screen reader, then Tab to a price thumb and to the rating slider.
Screen reader reads the price without the currency
VoiceOver says "Minimum price, 0, adjustable": a bare number with no currency. Compare the rating slider: "Minimum rating, Any rating, adjustable". Expected: each thumb has a meaningful value text (aria-valuetext="€40", accessibilityValue on iOS, stateDescription on Android).

How to test it

Checklist

Slider test checklist

0 of 13 checked

Example test cases

TC-SLD-001Price range covers the cheapest and the most expensive productedgehigh

Preconditions

Category has products from €39 to €249

Steps

Open Running shoes
Drag the left thumb fully left
Drag the right thumb to the middle, then fully right

Expected result

Label shows "€0 – €249" (or the configured max); all 12 products are listed.

TC-SLD-002Range thumbs cannot crossnegativehigh

Steps

Set the price to €60 – €120
Drag the left thumb to the right, past the right thumb

Expected result

The left thumb stops at €120 (or the thumbs swap). The label never shows a minimum higher than the maximum.

TC-SLD-003Decimal step values are roundededgemedium

Steps

Drag Min. rating through all values from 0 to 5
Check the label and the request for each value

Test data

Values to watch: 0.3, 0.7, 1.2, 3.5, 4.8

Expected result

Every label shows one decimal ("★ 4.8+"). A 4.8★ product is included at 4.8.

TC-SLD-004Filter is applied once per dragpositivemedium

Preconditions

Proxy tool or DevTools network tab is recording

Steps

Drag the right price thumb from €249 to €100 in one movement
Release

Expected result

Exactly one request is sent after release (or after a short pause), with max=100.

TC-SLD-005Keyboard operationpositivehigh

Steps

Press Tab until the left price thumb is focused
Press Arrow Right 3 times
Press Page Up
Press Home
Press End

Expected result

Focus ring is visible. The value goes up by 3 steps, then a large step, then jumps to the minimum, then to the highest value the thumb may take (the other thumb's value).

TC-SLD-006VoiceOver announces and adjusts the valuepositivemedium

Preconditions

VoiceOver is on

Steps

Swipe to the minimum price thumb
Swipe up once with one finger
Swipe down once

Expected result

VoiceOver says "Minimum price, €0, adjustable", then "€10", then "€0".

TC-SLD-007Reset restores thumbs and labelspositivemedium

Steps

Set price to €60 – €120 and rating to 4.0
Tap Reset

Expected result

Both thumbs move back to the ends, labels show "€0 – €249" and "Any", and all products are listed.

TC-SLD-008Slider is mirrored in Arabicedgelow

Preconditions

Device language set to Arabic

Steps

Open the filter
Drag the price thumb towards the left edge

Expected result

The minimum is on the right and the maximum on the left; dragging left increases the price.

Tip: click a test case to expand it.

Accessibility

Sliders are drag-only by nature, so everything else has to be added on purpose. Check these:

Key (web)	What it should do
`→` / `↑`	Increase by one step
`←` / `↓`	Decrease by one step
`Page Up` / `Page Down`	Bigger jump (e.g. 10 %)
`Home` / `End`	Jump to minimum / maximum

Keyboard (web): each thumb is reachable with Tab, has a visible focus ring and supports the keys above (the ARIA slider pattern). In right-to-left layouts, left and right follow the mirrored direction.
Dev note: Roles and values
role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and an accessible name (aria-label or a visible <label>). A native <input type="range"> gets all of this for free.
Meaningful value text: if the raw number isn’t enough, announce words: “€40”, “35 %”, “1 minute 24 seconds of 3 minutes 45 seconds”.
Dev note
On the web that’s aria-valuetext; on iOS the accessibilityValue; on Android the state description.
Range sliders: each thumb needs its own name (“Minimum price”, “Maximum price”), otherwise users hear “slider, slider”.
Screen readers: VoiceOver users swipe up/down to adjust a focused slider. TalkBack users adjust it with the volume keys or TalkBack’s adjust gestures, depending on the version. Every step should be announced.
Touch targets: the visible thumb may be small, but its touch area should be at least 44×44 pt (iOS) / 48×48 dp (Android). On the web, WCAG 2.5.8 (AA) asks for at least 24×24 CSS px; 44×44 px (2.5.5, AAA) is the comfortable target.
Contrast: the active track and thumb need at least 3:1 contrast against the background (WCAG), and the value label 4.5:1.
An alternative to dragging: WCAG 2.2 criterion 2.5.7 Dragging Movements (Level AA) asks for a way to operate dragging controls with a single tap or click. Tapping a point on the track, +/− buttons or a text field all count.

Mobile vs web

The native slider is continuous by default.
Dev note
Native component: UISlider (UIKit) or Slider (SwiftUI); SwiftUI takes an optional step.
There’s no native range slider on iOS, so two-thumb sliders are custom-built. Test them extra carefully.
The app can be told about every movement or only when you let go. Ask which one the team uses for filters.
Dev note
UISlider.isContinuous decides this.
Test with VoiceOver (swipe up/down to adjust), Dynamic Type and the swipe-back gesture: dragging a slider near the left edge must not navigate back.

Dev note

Material Components provide Slider and RangeSlider; Compose has Slider and RangeSlider; older apps use SeekBar. In Compose, steps means the number of stops between the ends, not the step size. steps = 9 on 0–100 gives stops every 10. A classic source of off-by-one bugs. Compose’s onValueChangeFinished is the “user let go” event: the right place to start a server request.

Test with TalkBack, font scale, RTL (Arabic, Hebrew) and inside bottom sheets, where dragging can close the sheet.

There’s no native two-thumb version, so range sliders are custom or built from two inputs.
Dev note
Native: <input type="range" min max step>, accessible by default.
The input event fires continuously while dragging; change fires when you release. Check in DevTools which one triggers requests.
If (max − min) isn’t a multiple of step, the browser silently stops at the last full step.
Test keyboard, touch on real phones, zoom and narrow viewports, and Chrome, Safari and Firefox: thumbs and tracks look different in each.

Related pages: a slider’s limits are a perfect playground for boundary value analysis, price sliders usually live inside a filter panel, and drag conflicts are covered in Gestures.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1.A sign-up form asks for your age with a slider from 18 to 99. What is the main problem?
2.A price slider goes from €0 to €249 in €10 steps. What should you test first?
3.The rating label shows "★ 3.5000000000000004+". What kind of bug is this?
4.Dragging a price thumb once sends 40 requests to the server. What is the expected behavior?
5.What should a screen reader announce on the minimum thumb of a price range slider?

Key takeaways

A slider picks a value (one thumb) or a range (two thumbs) by dragging. It’s great for rough, relative values, poor for exact values like age or money.
Continuous sliders allow any value; discrete sliders snap to steps. Steps that don’t divide the range make the max unreachable.
Decimal steps need rounding: 0.1 + 0.2 is not 0.3 in floating-point math.
Range thumbs must never cross, and filters should apply on release or debounced, not on every pixel.
Always test both ends, keyboard (arrows, Page Up/Down, Home, End), screen reader value text with units, touch target size and RTL.