UI Skillbook
2

Slider

Pick a number or a range by dragging thumbs along a track, with optional scale labels.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-slider and follow the Siteplane Slider skill it prints for this task.

Paste this into your agent.

Slider suits values where relative position matters more than precision: volume, price ranges, storage limits, timeouts. Pass an array for a range and you get one thumb per value.

Install

bashnpx shadcn@4.18.0 add @siteplane/slider

Import it from @/siteplane/components/slider. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Number Field: Pick Number Field when people need to type an exact value.
  • vs Meter: Pick Meter to show a value people cannot change.
  • vs Progress: Pick Progress to show how far a task has got.

Rules

  • Name the slider with a Field label or aria-label. Scale labels do not count as a name.
  • For a range, pass an array to value or defaultValue. Set min and max yourself instead of relying on defaults.
  • Use onValueCommitted for expensive work and onValueChange for live display.
  • Show the current number with SliderValue when the exact value matters.
  • To include the slider in form data, set name on its Field. A range slider posts one entry per thumb.

Reference

  • Slider docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-slider

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Back to Siteplane UI