Forms & inputs
Slider
A slider is a control where a visitor drags a handle along a track to set a number within a range, such as seats, usage volume or a budget.
- Also called
- Range slider, Range input, Slider control, Pricing slider
- Spotted on
- 8 of 422 homepages
- Browse examples
- Pricing pages →
What is a slider?
The slider's home on SaaS marketing sites is the pricing calculator. Usage-based and seat-based products let visitors drag to their volume and see the price update: the analytics tool Visitors shows a "10K events" slider priced per month, Tidio and Xata both put slider calculators on their pricing pages, and Getfuzzy's ROI calculator uses sliders for "Number of Sales Reps" and "Average Deal Size". Dragging makes the price feel personal rather than read from a table.
Sliders also show up as illustration: a "tone of voice" or saturation slider in a product mockup suggests fine-grained control in one image.
The weakness is precision. Dragging to exactly 1,250 seats is fiddly, especially on a phone, so the best pricing sliders snap to sensible steps, show the current value in large text and pair the handle with a number field or stepper for exact input. The handle should be at least 24px with a larger touch area, and arrow keys must move it.
When to use a slider, and when not to
Use it for
- Exploring a rangeVisitors want to see how price or savings change as volume grows, not enter one exact figure.
- Approximate values"About 50 seats" is good enough to show a price.
- Visual feedbackThe result updates live next to the handle, rewarding the drag.
Avoid it for
- Exact numbersIf the precise value matters, offer a number field or stepper instead or alongside.
- Huge rangesFrom 1 to 10 million, every pixel is thousands of units; use steps or tiers.
- Few discrete optionsThree plan sizes are clearer as a segmented control or cards.
Anatomy of a slider
- 1Label and valueWhat is being set and its current value, in readable text above the track.
- 2TrackThe horizontal bar representing the range, with the filled portion showing the value.
- 3HandleThe draggable thumb, large enough to grab on touch screens.
- 4Tick marksOptional markers for steps or tier boundaries, such as 1K, 10K, 100K.
- 5ResultThe price, savings or output that changes as the handle moves.
Common slider variants
1. Pricing calculator slider
One or more sliders on a pricing page that update the monthly cost.
2. Stepped slider
Snaps to defined stops, often aligned with plan tiers.
3. Range slider
Two handles setting a minimum and maximum, used in filters.
Spotted in our design reviews
Our reviews describe a slider on 8 of the 422 SaaS homepages in the catalog. A few of them:
"Adjust as you go" shows brown to amber swatches with a saturation slider, and "Redo with AI" shows eight rainbow bars.
Droplette · Setup steps in four cards
The "Calculate Your ROI with Fuzzy" calculator has sliders for "Number of Sales Reps" and "Average Deal Size", beside a result panel showing "Days to ROI".
Getfuzzy · Before-and-after schedule, ROI calculator and FAQ
A "Simplified pricing" block closes the stretch with a 10K events slider at $9/mo.
Visitors · Comparison and pricing
A black band, "See the leverage in your own numbers.", has three sliders and a retro device showing "$105,000".
Usesuperflow · Onboarding, calculator and proof
Below come an instance table from micro to 8xlarge, a tier table, a slider calculator totalling "$313.54", and a ten-question accordion.
Xata · Pricing & Plans
A "Meet your AI Agent" block follows, pairing a text accordion with a "Brand Tone & Voice" slider card.
Customer · Features
The pricing page opens with "Your AI-powered plans", two selectable cards and a slider calculator whose "Total price" reads "$0".
Tidio · Pricing & Plans
The slider reads 3 sites, totalling "$109/mo" for Webflow, Mailchimp and Plausible against an Aveiro "Starter plan" at "$12/mo".
Aveiro · Pricing, FAQ and footer
Often confused with
Slider vs. stepper
A stepper changes a number one step at a time with minus and plus buttons; a slider covers a wide range quickly but less precisely.
Slider vs. carousel
Reviewers and builders sometimes call a carousel a "slider". A carousel cycles through slides of content; a slider control sets a value.
Slider vs. progress indicator
A progress bar looks similar but only displays progress; a slider is interactive.
Frequently asked
Is a slider a good idea for a pricing calculator?
Yes for usage or seat-based pricing, where seeing the price move is the point. Add snapping steps, show the value clearly and offer a way to type an exact number.
Is a slider the same as a carousel?
No. Some site builders call carousels "sliders", but in UI terms a slider is an input for setting a value, while a carousel rotates content.