TonePad

Markdown

Two choices on one square: drag the handle between Formal and Casual, Brief and Detailed.

Use it for
Two linked settings on one square, such as tone and length.
Not for
One number, or exact values people type. Try Slider or Input.

TonePad preview

Loading example…

Installation

npm install @stackunseen/ui
import { TonePad } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Name both axes with the real words your model uses. The pad is made of two native sliders, one per axis, so keyboard and screen-reader users set the same two numbers.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

value: { x, y } (0–1) · onValueChange · axes: { x: [left, right], y: [bottom, top] } · step? · label? · disabled?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
value: { x, y } (0–1) · onValueChange · axes: { x: [left, right], y: [bottom, top] } · step? · label? · disabled?
Keeps honest
Name both axes with the real words your model uses. The pad is made of two native sliders, one per axis, so keyboard and screen-reader users set the same two numbers.
MCP
read_component "TonePad" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Tab visits the two sliders; arrow keys move one step, Home and End to the ends. The square itself takes pointer input.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio