Interface: UiTouchSliderProps<S>
Component props for UiTouchSlider.
Type parameters
Name | Type |
---|---|
S | extends 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
Name | Type |
---|---|
T | extends UiTouchSlider <S > = UiTouchSlider <S > |
Parameters
Name | Type | Description |
---|---|---|
position | Readonly <Omit <Float64Array , "set" | "sort" | "copyWithin" >> | The current position of the mouse. |
initialPosition | Readonly <Omit <Float64Array , "set" | "sort" | "copyWithin" >> | The position of the mouse at the start of the drag motion. |
slider | T | The 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
Name | Type |
---|---|
T | extends UiTouchSlider <S > = UiTouchSlider <S > |
Parameters
Name | Type | Description |
---|---|---|
position | Readonly <Omit <Float64Array , "set" | "sort" | "copyWithin" >> | The current position of the mouse. |
prevPosition | Readonly <Omit <Float64Array , "set" | "sort" | "copyWithin" >> | The position of the mouse at the previous update. |
initialPosition | Readonly <Omit <Float64Array , "set" | "sort" | "copyWithin" >> | The position of the mouse at the start of the current drag motion. |
slider | T | The 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
Name | Type |
---|---|
T | extends UiTouchSlider <S > = UiTouchSlider <S > |
Parameters
Name | Type | Description |
---|---|---|
position | Readonly <Omit <Float64Array , "set" | "sort" | "copyWithin" >> | The current position of the mouse. |
slider | T | The 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
Name | Type |
---|---|
T | extends UiTouchSlider <S > = UiTouchSlider <S > |
Parameters
Name | Type | Description |
---|---|---|
slider | T | The slider that gained UI focus. |
direction | UiFocusDirection | - |
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
Name | Type |
---|---|
T | extends UiTouchSlider <S > = UiTouchSlider <S > |
Parameters
Name | Type | Description |
---|---|---|
slider | T | The 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
Name | Type |
---|---|
T | extends UiTouchSlider <S > = UiTouchSlider <S > |
Parameters
Name | Type | Description |
---|---|---|
value | number | The new slider value. |
state | S | The slider's bound state. |
slider | T | The 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