Mixins / foldkit-mixins-ui
RangeSliderSlots
const · packages/mixins-ui/src/rangeSlider.ts:23
const RangeSliderSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"role">], readonly Slot.RequirementName[], boolean>; readonly label: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly control: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly track: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly range: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly thumb: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"input">], readonly [Attr.AttrToken<"aria-label">, Attr.AttrToken<"disabled">, Attr.AttrToken<"value">], readonly Slot.RequirementName[], boolean>; …;A range slider, the APG's multi-thumb slider: a root group named by its
label, and two native input type="range" thumbs over one track, each
a real slider with its own name, keys and form value. Upstream's Slider has
one thumb, so this is not built on it.
The thumbs cannot cross, and the browser keeps that: the low thumb's max
is the high value and the high thumb's min the low one, as the APG has
it, and each input spans only the part of the track it may travel (from
--fk-range-low and --fk-range-high on control, 0 to 1), so a thumb
sits where it would on the whole track. A drag past the other thumb stops
at it with no redraw needed, which a clamp in update alone could not do:
an unchanged Model draws nothing, and the input would keep its own value.
The range is the application's: the view draws value and sends
onChange with the next range from moved.