--- title: "Slider UI: anatomy, variants and examples | Kombai" description: "A slider lets people pick a value, or a range of values, by dragging a handle along a track." canonical_url: https://kombai.com/glossary/slider/ author: "The Kombai Team" --- # Slider A slider lets people pick a value, or a range of values, by dragging a handle along a track. - Also called: range slider, range input - Platforms: Web, Mobile - In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/slider/), [35 mobile designs](https://kombai.com/gallery/mobile/slider/) - [Sundermere](https://kombai.com/gallery/inspirations/slider-ios-20/) (Mobile) - [Tanglewood](https://kombai.com/gallery/inspirations/slider-web-43/) (Web) - [Vireo](https://kombai.com/gallery/inspirations/slider-ios-17/) (Mobile) ## What is a slider? A slider is a track with a handle that people drag to set a value between a minimum and a maximum. The filled part of the track shows where the value sits, and the number updates as the handle moves. A range slider adds a second handle to set both ends of a span. - The current value shows next to the handle or the label, so people don't have to guess. - Dragging gives rough control. Arrow keys and a text field give exact control. ## When to use slider - **Rough values.** Volume, brightness or a price ceiling, where close enough is fine. - **Ranges in filters.** A minimum and a maximum price, time or distance. - **Seeing the effect live.** A payment, a preview or a result count that updates as people drag. ## When not to use one - **Exact numbers.** For amounts people already know, use a text field, or pair one with the slider. - **Small counts.** For guests or quantities, use a stepper. - **A few named options.** Use a segmented control or radio buttons. ## Anatomy 1. **Track**: The full range of values 2. **Fill**: How much of the range is set 3. **Thumb**: The handle people drag 4. **Value label**: The current value, in words 5. **Range labels**: The minimum and the maximum 6. **States**: Default, dragging, disabled, focus ## Variants We sorted every slider design in the Kombai gallery and found six patterns. ### 1. Single-value sliders The default. One thumb on a track with the value beside it, for a length, a zoom level or a share of something. - [Sablewood](https://kombai.com/gallery/inspirations/slider-ios-35/) (Mobile) - [Vaults](https://kombai.com/gallery/inspirations/slider-web-41/) (Web) - [Cairnwell](https://kombai.com/gallery/inspirations/slider-web-38/) (Web) ### 2. Range sliders Two thumbs that set a minimum and a maximum, usually for a price, a time or a distance in a filter. - [Stonecrop](https://kombai.com/gallery/inspirations/slider-ios-25/) (Mobile) - [Marrowdale](https://kombai.com/gallery/inspirations/slider-ios-4/) (Mobile) - [Highmarsh](https://kombai.com/gallery/inspirations/slider-web-32/) (Web) ### 3. Stepped sliders The thumb snaps to marked stops, like text sizes or rate limits, with a label under each stop. - [Havenlark](https://kombai.com/gallery/inspirations/slider-ios-14/) (Mobile) - [Glenharrow](https://kombai.com/gallery/inspirations/slider-web-51/) (Web) - [Wexford](https://kombai.com/gallery/inspirations/slider-web-30/) (Web) ### 4. Ruler pickers A scale of tick marks that moves under a fixed pointer, for height, weight or volume. - [Fennwick](https://kombai.com/gallery/inspirations/slider-ios-27/) (Mobile) - [Calyx](https://kombai.com/gallery/inspirations/slider-ios-16/) (Mobile) - [Palewood](https://kombai.com/gallery/inspirations/slider-web-24/) (Web) ### 5. Adjustment panels Stacks of labeled sliders with a number beside each, for editing photos or tuning model settings. - [Adjustments](https://kombai.com/gallery/inspirations/slider-web-22/) (Web) - [Marrowfield](https://kombai.com/gallery/inspirations/slider-web-3/) (Web) - [Playground](https://kombai.com/gallery/inspirations/slider-web-1/) (Web) ### 6. Scrubbers A track tied to time, for trimming a clip, moving through a timeline or setting playback speed. - [Cinderwick](https://kombai.com/gallery/inspirations/slider-ios-32/) (Mobile) - [Fenholt](https://kombai.com/gallery/inspirations/slider-ios-5/) (Mobile) - [Basalt](https://kombai.com/gallery/inspirations/slider-ios-21/) (Mobile) ## Where sliders show up ### Search filters Price, start time and duration ranges in filter sheets and popovers, above the button that shows results. - [Ostara](https://kombai.com/gallery/inspirations/slider-ios-26/) (Mobile) - [Ashcombe](https://kombai.com/gallery/inspirations/slider-web-19/) (Web) - [Kelpwood](https://kombai.com/gallery/inspirations/slider-web-16/) (Web) ### Calculators and pricing Drag an income, a rent or a volume, and the budget or the price next to it updates. - [Novaris](https://kombai.com/gallery/inspirations/slider-ios-6/) (Mobile) - [Pinehold](https://kombai.com/gallery/inspirations/slider-web-28/) (Web) - [Kestrelbank](https://kombai.com/gallery/inspirations/slider-web-55/) (Web) ### Settings Brightness, ambience volume and compute resources, set once and left alone. - [Ledgestone](https://kombai.com/gallery/inspirations/slider-ios-30/) (Mobile) - [Ashcombe](https://kombai.com/gallery/inspirations/slider-ios-22/) (Mobile) - [Ravelin Notebooks](https://kombai.com/gallery/inspirations/slider-web-49/) (Web) ## Slider vs similar components | | [Slider](https://kombai.com/glossary/slider/) | [Stepper](https://kombai.com/glossary/stepper/) | [Segmented control](https://kombai.com/glossary/segmented-control/) | [Text field](https://kombai.com/glossary/text-field/) | |---|---|---|---|---| | Sets | Any value in a range | A number, one step at a time | One of a few options | Any exact value | | Precision | Rough, by dragging | Exact, in small steps | Fixed choices | Exact, by typing | | Best for | Prices, volume and sizes | Quantities and guests | Views and modes | Amounts people know | ## Build notes - Use with min, max and step. The defaults are 0, 100 and 1. - Arrow keys move one step, Home and End jump to the ends, and Page Up and Page Down take bigger steps. - For a custom slider, use role="slider" with aria-valuenow, aria-valuemin and aria-valuemax. - Set aria-valuetext when the number alone is unclear, like "$1,850 a month". - In a range slider, each thumb is its own tab stop, and the thumbs can't pass each other. - Add tick marks with a linked through the input's list attribute. ## FAQ ### When should I use a slider instead of a text field? When the exact value matters less than where it sits in the range, like volume. MDN advises using a range input only when the control's exact value isn't important. For amounts people know, like a loan, put a text field next to the slider. ### How does a slider work with a keyboard? Tab to the thumb, then use the arrow keys to move it one step at a time. Home and End jump to the minimum and the maximum, and Page Up and Page Down move in bigger steps where the slider supports them. ### What is a range slider? A slider with two thumbs that set the low and the high end of a span, like a price range in a filter. Each thumb is a separate tab stop, and the thumbs can't pass each other. ### Should a slider update results while people drag? Update the value label right away, so people see the number they are choosing. If each change runs a search, wait until they let go before fetching results, so the list does not flicker. ## Related terms - [Stepper](https://kombai.com/glossary/stepper/) - [Segmented control](https://kombai.com/glossary/segmented-control/) - [Filter chips](https://kombai.com/glossary/filter-chips/) - [Progress indicator](https://kombai.com/glossary/progress-indicator/) ## References - [WAI-ARIA Authoring Practices: Slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) - [WAI-ARIA Authoring Practices: Multi-thumb slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/) - [MDN: The range input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range)