Skip to main content
Frontend Glossary

UI components · Form input

Slider

Also called: Range slider, Range input, Dual slider

Drag a round handle along a horizontal track to pick a value or a range. Good for adjustments that don't need precision, like volume, brightness, or a price range.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

In the product filter bar, use a dual-handle slider for "Price range": $0 to $2,000, step $50. Fill the track between the two handles with a dark color, show the current price above each handle while dragging, and put two small number inputs below that stay in sync with the slider. Only fire the filter request when the mouse is released. Don't send requests constantly while dragging.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Slider is what you need.

Use Slider when

  • Settings like volume, brightness, or opacity that don't need exact values and show the effect live while dragging
  • Filtering ranges with clear upper and lower limits, like product price or home size
  • Picking one of a few ordered levels, like small, medium, or large font size

Pick something else when

  • Content that needs an exact value, like an amount or purchase quantity

    Use insteadInput Number

  • Values with a huge range and no clear upper limit, like annual income

  • Just showing how much of a task is done, where users can't drag. Use a progress bar.

    Use insteadProgress

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Using a slider for values that need precision, like age or quantity, so users drag again and again and still can't land on the value they want

  2. 02

    Not showing the current value while dragging, so users don't know what they picked

  3. 03

    Sending a request on every tiny movement while dragging, which makes the page lag

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A horizontal track, a filled section for the selected part, and one or two draggable round handles. Can have tick marks and value tooltips.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A slider has a track and a draggable handle. The track to the left of the handle is filled to show where the current value sits in the whole range. While dragging, the current value usually shows above the handle. You can also use two handles to pick a range, like a price of $100 to $500. Values can be continuous or snap to a few fixed steps, like small, medium, and large font sizes.

Its strength is that it's intuitive. Its weakness is that it's hard to land on an exact number, especially on phones. When users need a precise value, use an Input Number, or put a slider and an input number side by side and keep them in sync. Sliders work best when users can see the effect live while dragging, like adjusting image brightness or previewing volume.

Developer info
Term ID
component-slider
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • input[type="range"]
  • [role="slider"]
  • .ant-slider
  • .el-slider
  • [class*="MuiSlider-root"]
  • .arco-slider
  • .t-slider
  • .n-slider
  • [data-slot="slider"]
  • .form-range
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026