Input range: dual mode.

[tovebr]

Summary

Adds an opt-in dual-thumb (range) mode to smoothly-input-range for selecting a start/end range, alongside the existing single-value slider.

Usage

<smoothly-input-range dual min={0} max={100} step={1} name="price" label="Price" />

What's new

• dual prop (default false). When set, renders two overlaid native range thumbs, editable "From"/"To" number fields, and a colored fill between the thumbs.
• Value shape: single mode stays value: number; dual mode uses value: { start: number; end: number } — fully backwards compatible. Dual always holds a defined range (defaults to { start: min, end: max } at load; clearing a field resets that bound to min/max).
• Emits the range under the existing single name (smoothlyInput → { [name]: { start, end } }), matching the smoothly-input / smoothly-input-date-range conventions so it works with smoothly-form unchanged.

Behavior

• Thumbs can't cross — start ≤ end is enforced live; the dragged thumb hard-stops at the other.
• Text fields commit on blur or Enter, not per keystroke — you can clear a field to type a new number without it snapping mid-edit; on commit the value is clamped and the display re-syncs.
• Emit on release — dragging updates value/fill live but only emits smoothlyInput / smoothlyUserInput once the thumb is released (now applies to single mode too). smoothlyUserInput fires only on genuine user interaction; inner-field events don't leak.
• Fields are content-sized with a sensible min width; readonly/disabled styling matches the single slider.

Testing

• Pure value/clamp logic extracted to a dependency-free Range helper with unit tests (clamp, hard-stop, rounding, normalize/collapse, equality). Component wiring verified via the Stencil build + the range demo (no DOM test harness in this repo).
• npm test, npm run lint, npm run build, and check-dts all pass.

[cloudflare-workers-and-pages]

Deploying smoothly with    Cloudflare Pages

Latest commit:	85e472a
Status:	✅  Deploy successful!
Preview URL:	https://cbba0fb8.smoothly.pages.dev
Branch Preview URL:	https://input-range-dual.smoothly.pages.dev

View logs