Great for Filtering, Terrible for Typing.

A slider is the right control when the answer is a range and roughly right beats exactly right — price filters, budget caps, size limits. It is the wrong control when the exact number matters, and a well-built one admits that by pairing its thumbs with number inputs. Describe your scale and MeDo generates the slider, the steps, and the fallback in React + Tailwind.

A Slider Answers "About How Much", Never "Exactly How Much"

Sliders earn their place in filtering, where the user's real question is "what exists in my ballpark" — dragging a price range closed until the result count feels navigable is an exploration, and a slider makes exploration continuous and reversible in a way two number fields never will. The failure is using that same gesture where precision is the requirement: setting an invoice amount, an age gate, or a dosage with a fat thumb on a 0–100 track is an input method with a built-in error rate, and touch makes it worse — a finger covers about 9mm, so on a 300px track spanning 2,000,000 the precision is roughly ±30,000 per attempt. Good slider design concedes this instead of fighting it: big thumbs and coarse steps where the gesture is the point, small steps or non-linear mapping where the tail of the scale matters, and a synchronized number input beside every slider that carries exact values. Generate the control with its scale, steps and fallback stated together, because the slider is only half of the honest component.

4 個模板

可以產生的 Slider 模板

每個模板都是真實的提示詞，而非截圖。複製到任何 AI 編輯器，或在 MeDo 中執行，直接取得 React + Tailwind 程式碼。

PopularPrice Range

Dual-Thumb Marketplace Filter

The filter sidebar standard: non-linear low end, push-don't-swap thumbs, a live result count, and number inputs for exact budgets.

Create a dual-thumb price range slider for a marketplace filter, scale 0–2,000,000 with 25,000 steps. Map position non-linearly with a piecewise curve so 0–200,000 occupies the first third of the track. The 6px track shows the selected span in indigo-600 over zinc-200; thumbs are 24px white circles that scale to 26px on hover and show a focus-visible ring. Thumbs push rather than cross with a one-step minimum gap. Labels above the track render compactly as "$150k – $800k" with the dragged value in semibold. While dragging, a live line beneath updates a result count from a provided function. Full keyboard model per thumb — arrows, PageUp/PageDown at 10%, Home/End — with role="slider", aria-valuetext speaking formatted currency, and distinct "Minimum price"/"Maximum price" labels. Two synced number inputs sit below, bidirectionally bound to the thumbs.

在 MeDo 中試試

Instant feedbackCalculator

Loan Amount Slider With Live Payment

One gesture, one number that matters: drag the amount and the monthly payment recomputes under your finger. Feedback is the whole design.

Create a single-thumb loan amount slider for a mortgage calculator, scale 50,000 to 2,000,000 with 5,000 steps. The thumb is an oversized 32px circle for touch; the filled track uses an emerald gradient that darkens with amount. Above the track, the current amount renders large in 32px semibold formatted currency with a thousands separator, and beneath it a computed monthly payment ("$1,432/mo at 6.2% over 30y") recalculates live from a provided formula during the drag with no debounce. Keyboard support includes Shift+Arrow taking 10× steps. Pair the slider with a currency-formatted number input synced in both directions, and a reset link returning to the default of 350,000. The whole control lives on a card with the interest-rate term slider beside it sharing the same layout rhythm.

在 MeDo 中試試

Data-heavyHistogram Range

Range Slider Over a Distribution

Draw the data on the track and dragging becomes reading: users slide toward the visible dense region instead of guessing where values live.

Create a dual-thumb range slider with a histogram rendered on the track itself. Accept an array of bucket counts spanning the scale; render them as 2px-gapped zinc-300 bars of proportional height behind the track, with bars inside the selected span tinted indigo-400 and outside ones dimmed to 40%. Scale 0–100 with 1-unit steps, thumbs 20px. During drag, show a tooltip above the active thumb with the formatted value and the percentage of data points inside the current span ("38% of results"). Collisions push rather than swap. Aria-valuetext announces both the value and the bucket count at that position. Below, a "Reset range" text button appears only when the span differs from full, and the component emits onChange with the committed [min, max] on release rather than continuously, so expensive queries fire once.

在 MeDo 中試試

Fine controlMedia Control

Effect Slider With Editable Readout

For opacity, blur and volume: a slim track, fine steps, and a percentage readout that turns into an input when clicked — tuned for constant small adjustments.

Create a compact single-thumb slider for adjusting an effect value such as opacity, 0–100 with 1-unit steps and a 4px track. The thumb is a slim 16px circle so it does not occlude the track; hovering shows a filled-in effect preview applying the current value to a provided sample. To the right of the track, the value renders as a 48px-wide readout that becomes a number input on click, commits on Enter or blur, clamps to the range, and returns to readout form. Double-clicking the track resets to the default of 100. Keyboard: arrows step by 1, Shift+Arrow by 10, Home/End to limits, with role="slider" and aria-valuetext like "72 percent". Support vertical orientation via a prop for toolbars that stack, rotating the layout without changing the logic.

在 MeDo 中試試

如何自訂你的 Slider

Match the step size to the decision, not the data

A price filter over a 2M range with 1-unit steps produces 2M positions nobody can land on deliberately; steps of 25k make every stop meaningful. Step size encodes how precisely the value can be chosen — set it to the granularity of the actual decision, not the resolution of your data.

Use non-linear mapping when values cluster low

Income, price and file-size distributions pile up near zero, which a linear track crushes into a few pixels. Map thumb position through a log or piecewise curve so the crowded region gets proportional track space — and state the mapping in the prompt, because it is invisible in a screenshot and is usually the difference between a usable and an unusable filter.

Always pair thumbs with a number input

The slider chooses; the input commits exact values. Bidirectional sync — typing 843,000 moves the thumb, dragging snaps the input — serves both the explorer and the user who knows the number. A slider without this fallback is a control that literally cannot express many valid answers.

Show consequences live while dragging

The slider's superpower is continuous feedback: pair the drag with a live result count ("412 stays match"), a computed payment, or a preview that updates in real time. A slider that only matters after a submit button converts its one advantage into decoration.

誰在使用 Slider 組件

Marketplace price filter

A dual-thumb range in the sidebar with a non-linear lower end, live result count while dragging, and min/max number inputs for users with an exact budget — the canonical three-part slider.

Mortgage and loan calculators

Loan amount and term as large-thumb sliders over formatted scales, each paired with a currency input, where every drag recomputes the monthly payment instantly — feedback being the entire reason a slider beats a field here.

Media and design tools

Opacity, blur, volume and crop controls: single-thumb sliders with fine steps and a value readout that becomes editable on click, tuned for the constant small adjustments these tools live on.

Search and data dashboards

Date-range and numeric thresholds as multi-handle sliders over histograms, where the underlying distribution is drawn on the track itself so users drag toward the dense regions they can actually see.

不同網站的 Slider 方案

同一個 slider 組件，針對它所在網站的類型作調整。

01 / 04

E-commerce and Marketplaces

Price, rating, and dimension filters as dual-thumb sliders with live counts. The slider wins here precisely because the answer is a range and the shopper is exploring — the moment the filter needs an exact value, the paired number inputs take over.

Slider 的風格與變體

挑選與頁面其餘部分相襯的變體，然後產生它。

01 / 04

Minimal Track With Floating Labels

A hairline track, small circular thumbs, and the two values floating above the selected span. The quietest look and the default for filter sidebars, where the slider is one control among many and must not out-shout its neighbors.

在 React、Next.js、Vue 與 Svelte 中使用 Slider

React、Next.js、Vue 3、SvelteKit、Astro 或純 HTML —— 同一個 slider，六種接入方式。

01 / 03

React Range Slider

The dual-thumb core: a clamped setter that pushes instead of swapping, and pointer capture so the drag survives leaving the track. Step rounding happens in one place, on the way in.

src/components/RangeSlider.tsx

const [range, setRange] = useState([0, 2000000])
const MIN_GAP = 25000

function moveThumb(index, raw) {
  const stepped = Math.round(raw / 25000) * 25000
  setRange(([lo, hi]) => {
    if (index === 0) return [Math.min(stepped, hi - MIN_GAP), hi]
    return [lo, Math.max(stepped, lo + MIN_GAP)]
  })
}

function onPointerDown(e, i) {
  e.target.setPointerCapture(e.pointerId)
  const track = e.currentTarget
  const pct = (e) => (e.clientX - track.getBoundingClientRect().left) / track.offsetWidth
  const onMove = (e) => moveThumb(i, pct(e) * 2000000)
  const onUp = () => {
    window.removeEventListener('pointermove', onMove)
    window.removeEventListener('pointerup', onUp)
  }
  window.addEventListener('pointermove', onMove)
  window.addEventListener('pointerup', onUp)
}

如何把 Slider 加入專案

四個步驟，從挑選 slider 模板到推上生產環境。

01~1min

Decide Whether the Value Is Exact or Approximate

This is the fork in the road: filters and calculators suit sliders; exact figures need a number input, full stop. If your page needs both behaviors — most do — plan the slider-plus-input pair from the start rather than bolting the input on later.

02~2min

Define Scale, Steps, and Mapping

Set the min, max, and step to the granularity of the real decision, and note whether values cluster near the low end badly enough to need log or piecewise mapping. These three numbers determine whether the slider is usable before any styling exists.

03~3min

Generate and Drag With a Finger, Not Just a Mouse

You get React + Tailwind with a live preview. Test thumbs colliding — push behavior, not swap — then try the keyboard: arrows, PageUp, Home and End, checking that the screen-reader value text speaks formatted currency, not raw integers.

04~3min

Wire Live Feedback and Ship

Connect the drag to whatever should respond — result counts, computed payments, previews — and confirm the synced number inputs round-trip values in both directions before shipping.

關於 Slider 的常見問題

When should I use a slider instead of a number input?

Use a slider when the value is exploratory and approximate: filters, budgets, effect intensities, anything where the user is feeling for a boundary rather than submitting a figure. Use a number input when the exact value matters — payment amounts, dimensions, ages — or when the plausible range is so wide that meaningful movement needs a keyboard anyway. The strongest forms do both: a slider for the gesture with a synced input for precision, and either path updates the other.

How do I build a dual-thumb range slider without thumbs crossing?

Hold the two values in a tuple and clamp each drag against the other thumb plus a minimum gap. The design decision that matters is the collision behavior: swapping values when thumbs cross feels like losing your place, so the better default is pushing — dragging the low thumb into the high one drags the high one along. Say which you want; both are a few lines of clamp logic, but the generated code will not invent the preference.

Why does my slider feel impossible to set precisely?

Resolution and digit size. A finger covers roughly 9mm, so precision is bounded by track-width-divided-by-range: a 300px track over a 0–2,000,000 scale gives about ±30,000 accuracy per touch attempt. Fix it with any combination of larger thumbs and tracks on touch, coarser steps so each stop is a real answer, non-linear mapping that gives the crowded low end more track, and a number input beside the slider for the exact value.

How do I make a slider accessible?

Each thumb is a focusable element carrying role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and an aria-valuetext that speaks the formatted value ("eight hundred thousand dollars", not "800000"), plus an aria-label distinguishing minimum from maximum. Arrow keys step, PageUp/PageDown take a large step, Home and End hit the limits. Two thumbs on one track is the accessibility hard part — each must be independently reachable and named, which is why MeDo generates the wiring rather than leaving it to hand-written attributes.

Should the slider show the selected value as a label or a tooltip?

Persistent labels beat drag-time tooltips for filters, because the chosen range needs to stay readable after the gesture ends — the state outlives the interaction. Tooltips during drag suit effect controls where the value is a means to a visual end. Either way, format for humans: "$150k – $800k" not "150000 – 800000", and emphasize the value currently being dragged so the user knows which thumb they are moving.

How do I add steps or snap points to a slider?

Round the value on every change — value = Math.round((raw - min) / step) * step + min — so the thumb settles on valid stops rather than snapping back visually after release. For uneven snap points, like 0/25/50/100/250/500 storage tiers, replace the linear round with a lookup to the nearest allowed value and set aria-valuetext to the tier name. State the tiers in your prompt; they change the generated math, not just the styling.

立即用 MeDo 生成你的 slider。

試試任何提示詞 — 免費，無需註冊。

免費開始構建查看定價

輸入框

描述你的表單，MeDo 會同時生成文字輸入框與多行文字框 — 標籤、輔助文字、錯誤狀態、前綴與後綴附加元素、字數計算以及高度自動調整，全部連接到正確的無障礙屬性。

相關元件

Pagination

Describe your list and MeDo generates numbered pagination with crawlable page URLs, a windowed range that stays readable at ten thousand items, and prev-next controls that never wrap — plus the load-more and cursor variants for the pages where you genuinely do not want page numbers.

相關元件

卡片

描述卡片承載的內容，MeDo即可生成完整容器 — 媒體、標題、內文與頁腳插槽，懸停浮起效果，以aspect-ratio鎖定的圖片，格線中的等高排列，以及配套的骨架狀態。

相關元件

分頁標籤

描述你的面板，MeDo 就會生成完整的分頁標籤元件 — 正確的 ARIA 角色、方向鍵導覽、帶動畫的啟用指示線、手機版溢出處理，以及與網址同步、重新載入後依然保留的啟用標籤。

相關元件