Interface: TouchSliderProps<S>
Component props for TouchSlider.
Type parameters
| Name | Type |
|---|---|
S | extends Subscribable<number> | MutableSubscribable<number> |
Hierarchy
ComponentProps↳
TouchSliderProps
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.
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.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:16
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.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:34
children
• Optional children: DisplayChildren[]
The children of the display component.
Inherited from
ComponentProps.children
Defined in
src/sdk/components/FSComponent.ts:122
class
• Optional class: string | SubscribableSet<string>
CSS class(es) to apply to the slider's root element.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:155
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.
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.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:136
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 false.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:124
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.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:97
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.
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.
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.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:82
isVisible
• Optional isVisible: boolean | Subscribable<boolean>
Whether the slider is visible. Defaults to true.
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 false.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:130
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
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 TouchSlider<S, TouchSliderProps<S>> = TouchSlider<S, TouchSliderProps<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/garminsdk/components/touchslider/TouchSlider.tsx:72
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 TouchSlider<S, TouchSliderProps<S>> = TouchSlider<S, TouchSliderProps<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/garminsdk/components/touchslider/TouchSlider.tsx:59
onDragStarted
• Optional onDragStarted: <T>(position: Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>, slider: T) => void
A function which is called 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.
Type parameters
| Name | Type |
|---|---|
T | extends TouchSlider<S, TouchSliderProps<S>> = TouchSlider<S, TouchSliderProps<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/garminsdk/components/touchslider/TouchSlider.tsx:50
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 TouchSlider<S, TouchSliderProps<S>> = TouchSlider<S, TouchSliderProps<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/garminsdk/components/touchslider/TouchSlider.tsx:43
orientation
• orientation: "to-left" | "to-right" | "to-top" | "to-bottom"
The orientation of the slider's main axis.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:19
ref
• Optional ref: NodeReference<any>
A reference to the display component.
Inherited from
ComponentProps.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.
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.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:115
state
• state: S
A subscribable whose state will be bound to the slider's value.
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].
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.
Defined in
src/garminsdk/components/touchslider/TouchSlider.tsx:109