KQ-627 · STOP/RAIL
Stop Rail
A trade plan you can grab. Stop, entry and target handles ride one price rail and the bands between them shade the loss and the gain, animating left and width on glide — except while a finger is down, when the transition drops to zero so a band tracks the hand instead of trailing it. The R multiple eases through a motion value on snap and turns success when it crosses the threshold; each handle is a slider where arrows step, Shift or Page steps ten at a time, and Home and End jump to the limits its neighbours leave it.
KQ-627 · STOP/RAIL
BSNlong
2.67R- Stop
- 23.30
- Entry
- 24.20
- Target
- 26.60
- Risk
- $36.00
- Reward
- $96.00
Risk $36.00, reward $96.00, 2.67 R
Risk $36.00 · reward $96.00 · 2.67R
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/stop-rail
Props
- value / defaultValue
- StopRailValue
- default —
- Controlled or initial { stop, entry, target } prices.
- onValueChange
- (value: StopRailValue) => void
- default —
- Fires from the drag or key that moved a handle.
- low
- number
- default —
- Left end of the rail's price domain.
- high
- number
- default —
- Right end of the rail's price domain.
- step
- number
- default 0.01
- Arrow-key increment; drags snap to it.
- side
- "long" | "short"
- default "long"
- Which side of entry the stop sits on; a short reverses the rail.
- size
- number
- default 1
- Units, so risk and reward read as money.
- symbol
- string
- default —
- Instrument code in the header.
- format
- (value: number) => string
- default USD, 2dp
- Formats the risk and reward money.
- formatPrice
- (value: number) => string
- default 2dp
- Formats the three prices.
- goodAt
- number
- default 2
- R at which the ratio and the gain band turn success.
- minGap
- number
- default step * 4
- Smallest distance allowed between handles.
- label
- string
- default "Risk"
- Names the group for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | StopRailValue | — | Controlled or initial { stop, entry, target } prices. |
| onValueChange | (value: StopRailValue) => void | — | Fires from the drag or key that moved a handle. |
| low | number | — | Left end of the rail's price domain. |
| high | number | — | Right end of the rail's price domain. |
| step | number | 0.01 | Arrow-key increment; drags snap to it. |
| side | "long" | "short" | "long" | Which side of entry the stop sits on; a short reverses the rail. |
| size | number | 1 | Units, so risk and reward read as money. |
| symbol | string | — | Instrument code in the header. |
| format | (value: number) => string | USD, 2dp | Formats the risk and reward money. |
| formatPrice | (value: number) => string | 2dp | Formats the three prices. |
| goodAt | number | 2 | R at which the ratio and the gain band turn success. |
| minGap | number | step * 4 | Smallest distance allowed between handles. |
| label | string | "Risk" | Names the group for assistive technology. |