Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA bottom sheet with a labelled slider for a search distance, a live readout in kilometres or miles, preset buttons and Apply. Use this when a phone search or map needs a distance, price or duration chosen from a continuous range.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a phone search or map needs a distance, price or duration chosen from a continuous range.
Do not use it for exact values the person already knows (use a number field) or for ranges with two ends (use a range slider).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | required | Applied radius in km. |
onApply | (km: number) => void | required | Called with the chosen radius. |
max | number | 50 | Largest radius. |
The pattern ships with a Testing Library test (radius-slider-sheet.test.tsx) that drives it through roles and the keyboard.