The Drag-to-Filter Price Slider Is Quietly Locking Out a Chunk of Your Shoppers

You have almost certainly used one. You land on a shop’s category page, glance at the sidebar, and there it is: a thin horizontal bar with two little circles you can drag toward each other to say “show me things between £20 and £80.” It feels modern. It feels tidy. It saves space compared to a long list of price checkboxes.

It is also one of the most reliably broken controls in all of e-commerce, and most store owners have no idea, because it works perfectly the way they test it: with a mouse, on a laptop, with good eyesight.

Change any one of those three things and the price slider can go from convenient to completely unusable. For a shopper who navigates with a keyboard, a shopper who can’t see the screen, or a shopper zoomed in at 300% on their phone, that friendly little drag control is often a wall. And unlike a lot of accessibility problems, this one sits right on the path to purchase. If someone can’t filter, a lot of them just leave.

Let’s walk through why this happens, how to tell if your store has the problem, and what “fixed” actually looks like — all in plain language, no code required to understand it.

Why a price slider is harder than it looks

A price slider seems simple, but under the hood it’s doing something genuinely tricky. A checkbox is either ticked or not. A dropdown is a list of fixed choices. A slider, by contrast, represents a range of continuous values and usually has two independently movable handles — a minimum and a maximum — that aren’t allowed to cross each other.

That’s a lot of state to communicate. To use the control, a person needs to know:

  • What am I even adjusting — price? Rating? Something else?
  • Which handle is the minimum and which is the maximum?
  • What’s the current value of the handle I’m touching right now?
  • What are the lowest and highest values allowed?
  • Did my last action actually change anything?

A sighted mouse user gets all of that for free, visually and instantly. They see the label above the slider, they see the two handles, they see the numbers update as they drag. The information is there, it’s just delivered entirely through sight and pointer movement.

The trouble is that many sliders are built as decorative <div> elements styled to look like a track and two dots, with all the dragging behaviour bolted on for the mouse and nothing underneath telling assistive technology what any of it means. So when you take sight and the mouse away, there’s simply nothing left to work with.

The three ways it breaks

1. Keyboard users can’t move the handles at all

Try this on your own store right now. Click into the address bar, then press Tab repeatedly to move through the page without touching your mouse. Watch for the focus outline — the ring or highlight that shows where you are.

When you reach the price filter, can you get onto the slider handles? And once you’re there, do the arrow keys move them up and down? On a properly built slider, each handle is a stop on the Tab order, and Left/Right or Up/Down arrows nudge the value. On a broken one, Tab skips straight past the slider entirely, because those decorative dots were never made focusable. The handles might as well not exist.

For the millions of people who can’t use a mouse — because of tremors, limited hand mobility, repetitive strain injury, or simply because they navigate by keyboard out of preference or necessity — a mouse-only slider is a dead end. They can see the filter. They just can’t touch it.

2. Screen reader users hear nothing useful

Now imagine you can’t see the screen at all, and a screen reader is reading the page aloud to you. A well-built slider announces something like: “Minimum price, slider, 20 pounds, minimum 0, maximum 500.” You know exactly what you’ve landed on, which handle it is, and what you can do.

A poorly built slider announces… nothing. Or worse, it announces a meaningless jumble of <div> elements with no name, no role, and no value. The shopper hears an empty gap where a control should be. Even if the handles somehow are reachable, if the current value isn’t spoken as it changes, the person is dragging blind — adjusting a number they can never hear. There’s no feedback loop, so there’s no way to land on the price they actually want.

3. The handles are too small to grab — for everyone

Even for sighted users, slider handles are frequently tiny: an 8-pixel dot floating on a 2-pixel line. On a touchscreen, that’s a nightmare. Anyone with less-than-perfect dexterity — and that’s a huge group, including a lot of older shoppers — ends up fat-fingering the wrong handle, grabbing the track instead, or dragging past their target and giving up.

WCAG, the international accessibility guidelines, ask for interactive targets to be at least 24 by 24 pixels for exactly this reason. A lot of theme sliders are well under that. This one isn’t only a disability issue; it’s a “why is this so fiddly on my phone” issue that quietly annoys a slice of every audience.

The 60-second test any store owner can run

You don’t need tools or technical knowledge to catch the worst of this. Go to a category page on your own store and do three quick things:

  1. The Tab test. Put your cursor in the browser’s address bar, then press Tab over and over. When you reach the price filter, can you land on the handles, and do the arrow keys move them? If Tab skips the slider or the arrows do nothing, you’ve found the problem.

  2. The zoom test. Press Ctrl and + (or Cmd and + on a Mac) until the page is at 400%. Does the slider still work, or has it collapsed, overlapped other content, or vanished off the side? Magnification users live at this zoom level.

  3. The “is there a backup?” test. Look for two plain number boxes — a “min price” and “max price” field you can type into — sitting near the slider. If the slider is the only way to set a price range, that’s a red flag. If there’s a typed alternative, you have a safety net.

If your slider fails the Tab test and there’s no typed fallback, a real portion of your visitors cannot filter by price, full stop.

What a genuinely accessible price filter looks like

Here’s the reassuring part: fixing this is well-understood territory, and your fix usually falls into one of three buckets, from easiest to most thorough.

Option one: give people a typed alternative. The single most reliable fix is to make sure the slider is never the only way to set a price. Add two simple number input fields — “From” and “To” — with clear visible labels, right next to the slider. They stay wired to the same filter, so the slider and the boxes update each other. Now a keyboard user tabs into a field and types “20.” A screen reader user hears “From, price, edit” and types a number like any other form. This alone rescues the feature for the people most likely to be shut out, and it’s the kind of change a competent theme developer can make quickly.

Option two: use a real, properly labelled slider. If you want to keep the drag interaction, the handles need to be built as genuine slider controls, not decorative dots. That means each handle can receive keyboard focus, arrow keys change its value, and it exposes a proper accessible name (“minimum price”), a role (“slider”), and its current, minimum, and maximum values so a screen reader can announce them. Most modern accessibility-minded theme frameworks and reputable filter plugins already ship components that do this correctly — the job is choosing one and confirming it, not inventing it from scratch.

Option three: reconsider whether you need a slider at all. For a lot of shops, a short list of sensible price bands — “Under £25,” “£25 to £50,” “£50 to £100,” “Over £100” — as plain radio buttons or checkboxes is faster for everyone, trivially accessible, and easier on mobile than any slider. It’s worth asking whether the slider is solving a real problem for your customers or just looking sleek in the design mockup.

Whichever route you take, the finish line is the same, and you test it the same way: tab to the control with the keyboard and set a range, run a screen reader across it and confirm it announces the label and values, and check it at 400% zoom. If a person can filter by price using only a keyboard, and again using only a screen reader, you’ve solved it.

Why this is worth your attention

It’s tempting to file price sliders under “nice to have.” But this is a control that sits directly between your visitor and the products they’re trying to buy. Every shopper you block at the filter is a shopper who never reaches the checkout — and in the EU under the European Accessibility Act, and in the US under the ADA, an online store that can’t be operated without a mouse or without sight is exactly the kind of barrier that draws complaints and, increasingly, demand letters.

The good news is that price filtering is one of those problems where the accessible version is also just the better version. A typed min/max box helps the power user who knows they want something around £45. Bigger, easier handles help everyone on a phone. Clear price bands help the shopper who doesn’t want to fiddle at all. Fixing this rarely means making the experience worse for anyone — it means making it work for more people, which is the whole point.

Go run the 60-second test. If your slider fails it, you’ve just found a small, fixable change that quietly widens your entire funnel.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.