Skip to main content

Interface: UiTouchSliderProps<S>

Component props for UiTouchSlider.

Type parameters

NameType
Sextends Subscribable<number> | MutableSubscribable<number>

Hierarchy

  • Omit<TouchSliderProps<S>, "onValueChanged" | "onDragStarted" | "onDragMoved" | "onDragEnded" | "focusOnDrag" | "lockFocusOnDrag" | "class">

    UiTouchSliderProps

Properties

background

Optional background: VNode

The background for the slider, as a VNode. The background is visible along the area of the slider corresponding to values greater than the slider's current value.

Inherited from

Omit.background

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:91


bus

Optional bus: EventBus

The event bus. If defined, the mouse drags on the slider will end when the mouse leaves the instrument window, including when focus is locked.

Inherited from

Omit.bus

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:16


canBeFocused

Optional canBeFocused: boolean | Subscribable<boolean>

Whether the slider can be focused. Irrespective of this value, the slider cannot be focused while it is disabled or not visible. Defaults to true.

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:105


changeValueOnDrag

Optional changeValueOnDrag: boolean

Whether to change the slider's value immediately when dragging. If false, the slider's value will only be changed when dragging stops. Defaults to false.

Inherited from

Omit.changeValueOnDrag

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:34


children

Optional children: DisplayChildren[]

The children of the display component.

Inherited from

Omit.children

Defined in

src/sdk/components/FSComponent.ts:122


class

Optional class: string | ToggleableClassNameRecord | SubscribableSet<string>

CSS class(es) to apply to the slider's root element.

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:111


dragInhibitThresholdPx

Optional dragInhibitThresholdPx: number

The distance along the slider's cross-axis, in pixels, the mouse can click and drag before the slider begins to ignore mouse events. Ignored if inhibitOnDrag is false. Defaults to 40 pixels.

Inherited from

Omit.dragInhibitThresholdPx

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:149


dragLockFocusThresholdPx

Optional dragLockFocusThresholdPx: number

The distance along the slider's main axis, in pixels, the mouse must click and drag before the slider locks focus. Ignored if lockFocusOnDrag is false. Defaults to 10 pixels.

Inherited from

Omit.dragLockFocusThresholdPx

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:136


focusController

Optional focusController: UiFocusController

A UI focus controller with which to automatically register the slider after it is rendered. If not defined, then the slider will not be automatically registered with any controller, but it may still be registered manually.

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:99


focusOnDrag

Optional focusOnDrag: boolean

Whether the slider should focus all mouse events when dragging, preventing them from bubbling up to any ancestors in the DOM tree. Defaults to true.

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:80


focusOptions

Optional focusOptions: Readonly<UiTouchSliderFocusModuleOptions>

Options to configure the slider's behavior related to UI focus.

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:108


foreground

Optional foreground: VNode

The foreground for the slider, as a VNode. The foreground is visible along the area of the slider corresponding to values less than the slider's current value.

Inherited from

Omit.foreground

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:97


gduFormat

Optional gduFormat: GduFormat

The format of the slider's parent GDU display. Used to set the slider's drag lock focus and inhibit on drag thresholds unless otherwise specified by the dragLockFocusThresholdPx and dragInhibitThresholdPx props, respectively. Defaults to '460'.

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:93


inhibitOnDrag

Optional inhibitOnDrag: boolean

Whether the slider should stop responding to mouse events and instead forward them to its parent after clicking and dragging for a certain distance defined by dragThresholdPx along the slider's cross-axis. The inhibit function is disabled when focus is locked. Defaults to false.

Inherited from

Omit.inhibitOnDrag

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:143


inset

Optional inset: VNode

The inset for the slider, as a VNode. The inset is placed above the background and foreground and below the thumb and is always visible.

Inherited from

Omit.inset

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:103


isEnabled

Optional isEnabled: boolean | Subscribable<boolean>

Whether the slider is enabled, or a subscribable which provides it. Disabled sliders cannot be interacted with. Defaults to true.

Inherited from

Omit.isEnabled

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:82


isVisible

Optional isVisible: boolean | Subscribable<boolean>

Whether the slider is visible. Defaults to true.

Inherited from

Omit.isVisible

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:85


lockFocusOnDrag

Optional lockFocusOnDrag: boolean

Whether the slider should lock focus when dragging, consuming mouse events for the entire document window instead of just the slider's root element and disabling the inhibit function. Defaults to true.

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:86


onDestroy

Optional onDestroy: () => void

A callback function which will be called when the slider is destroyed.

Type declaration

▸ (): void

A callback function which will be called when the slider is destroyed.

Returns

void

Inherited from

Omit.onDestroy

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:152


onDragEnded

Optional onDragEnded: <T>(position: Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>, initialPosition: Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>, slider: T) => void

A function which is called when a drag motion ends.

Param

The current position of the mouse.

Param

The position of the mouse at the start of the drag motion.

Param

The slider.

Type declaration

▸ <T>(position, initialPosition, slider): void

A function which is called when a drag motion ends.

Type parameters
NameType
Textends UiTouchSlider<S> = UiTouchSlider<S>
Parameters
NameTypeDescription
positionReadonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>The current position of the mouse.
initialPositionReadonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>The position of the mouse at the start of the drag motion.
sliderTThe slider.
Returns

void

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:58


onDragMoved

Optional onDragMoved: <T>(position: Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>, prevPosition: Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>, initialPosition: Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>, slider: T) => void

A function which is called when the mouse is moved during a drag motion.

Param

The current position of the mouse.

Param

The position of the mouse at the previous update.

Param

The position of the mouse at the start of the current drag motion.

Param

The slider.

Type declaration

▸ <T>(position, prevPosition, initialPosition, slider): void

A function which is called when the mouse is moved during a drag motion.

Type parameters
NameType
Textends UiTouchSlider<S> = UiTouchSlider<S>
Parameters
NameTypeDescription
positionReadonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>The current position of the mouse.
prevPositionReadonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>The position of the mouse at the previous update.
initialPositionReadonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>The position of the mouse at the start of the current drag motion.
sliderTThe slider.
Returns

void

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:45


onDragStarted

Optional onDragStarted: <T>(position: Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>, slider: T) => void

A function which is called when a drag motion starts. If not defined, then the slider will default to attempting to set focus on itself when a drag motion starts.

Param

The current position of the mouse.

Param

The slider.

Type declaration

▸ <T>(position, slider): void

A function which is called when a drag motion starts. If not defined, then the slider will default to attempting to set focus on itself when a drag motion starts.

Type parameters
NameType
Textends UiTouchSlider<S> = UiTouchSlider<S>
Parameters
NameTypeDescription
positionReadonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>The current position of the mouse.
sliderTThe slider.
Returns

void

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:36


onFocusGained

Optional onFocusGained: <T>(slider: T, direction: UiFocusDirection) => void

A function which is called when the slider gains UI focus.

Param

The slider that gained UI focus.

Type declaration

▸ <T>(slider, direction): void

A function which is called when the slider gains UI focus.

Type parameters
NameType
Textends UiTouchSlider<S> = UiTouchSlider<S>
Parameters
NameTypeDescription
sliderTThe slider that gained UI focus.
directionUiFocusDirection-
Returns

void

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:68


onFocusLost

Optional onFocusLost: <T>(slider: T) => void

A function which is called when the slider loses UI focus.

Param

The slider that lost UI focus.

Type declaration

▸ <T>(slider): void

A function which is called when the slider loses UI focus.

Type parameters
NameType
Textends UiTouchSlider<S> = UiTouchSlider<S>
Parameters
NameTypeDescription
sliderTThe slider that lost UI focus.
Returns

void

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:74


onValueChanged

Optional onValueChanged: <T>(value: number, state: S, slider: T) => void

A function which is called when the slider's value changes from user input. If this function is not defined and the slider's bound state is a mutable subscribable, the new value will be automatically written to the bound state.

Param

The new slider value.

Param

The slider's bound state.

Param

The slider.

Type declaration

▸ <T>(value, state, slider): void

A function which is called when the slider's value changes from user input. If this function is not defined and the slider's bound state is a mutable subscribable, the new value will be automatically written to the bound state.

Type parameters
NameType
Textends UiTouchSlider<S> = UiTouchSlider<S>
Parameters
NameTypeDescription
valuenumberThe new slider value.
stateSThe slider's bound state.
sliderTThe slider.
Returns

void

Defined in

src/workingtitle-instruments-g3x-touch/html_ui/Pages/VCockpit/Instruments/NavSystems/G3XTouch/Shared/Components/TouchSlider/UiTouchSlider.tsx:28


orientation

orientation: "to-left" | "to-right" | "to-top" | "to-bottom"

The orientation of the slider's main axis.

Inherited from

Omit.orientation

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:19


ref

Optional ref: NodeReference<any>

A reference to the display component.

Inherited from

Omit.ref

Defined in

src/sdk/components/FSComponent.ts:125


snapAnimationEasing

Optional snapAnimationEasing: AnimatorEasingFunc

The easing function to apply to the snapping-to-stop animation. Defaults to a cubic ease-out function.

Inherited from

Omit.snapAnimationEasing

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:118


snapAnimationSpeed

Optional snapAnimationSpeed: number | Subscribable<number>

The speed of the animation when snapping to a stop, in units of slider value per second. A speed of zero will result in no animation. Defaults to zero.

Inherited from

Omit.snapAnimationSpeed

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:115


state

state: S

A subscribable whose state will be bound to the slider's value.

Inherited from

Omit.state

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:22


stops

Optional stops: readonly number[] | Subscribable<readonly number[]>

An array of stops on the slider, defined as values in the range [0, 1]. The slider will snap to each stop. If not defined or is equal to the empty array, then the slider will be able to take any value in the range [0, 1].

Inherited from

Omit.stops

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:28


thumb

Optional thumb: VNode

The thumb for the slider, as a VNode. The thumb is placed at the location along the slider corresponding to the slider's current value.

Inherited from

Omit.thumb

Defined in

src/garminsdk/components/touchslider/TouchSlider.tsx:109