- type PluginCallback: (slider: Slider89) => void
No description.
- type ExtendList: ExtendList[] | PluginCallback | Config | Style
No description.
- type
PropertyInfo<Prop>: Prop extends keyof Readonly ? {readOnly: true} : {constructorOnly: boolean,}
isDeepDefined: boolean,
type: Descriptor No description.
- type TypedMethods: keyof methodArgs
No description.
- type StyleDirection: "top" | "right" | "bottom" | "left"
No description.
- type RecomputationNewVals: Partial<Pick<Base, "value" | "range" | "step">>
No description.
- type
EventArgs: {update: {} & {value: number,},
prevVal: number,
thumbIndex: number,
event: UIEvent
start: {thumbIndex: number,},
event: TouchEvent | MouseEvent
move: {thumbIndex: number,},
event: TouchEvent | MouseEvent
end: {thumbIndex: number,}
event: TouchEvent | MouseEvent[T in keyof WithCustom]: T extends keyof Deep}? {} : {value: WithCustom[T],}
prevVal: WithCustom[T] No description.
- type EventListenerID: number | string
No description.
- type PropertiesOutline: {}
No description.
- type AccessibilityVals: Pick<Base, "range" | "value" | "orientation">
No description.
- type VariableName: SpecialVariables.Name | keyof WithCustom
No description.
- type StyleSpec:
No description.
class Slider89 extends Setup
This class handles everything related to the initial setup of the slider, including resolving and testing the config, registering properties and handling plugins, mixins and CSS.
- Slider89(target: HTMLElement,): Slider89
config?: false | Config,
replace: boolean = false No description.
- range: [number, number]
No description.
- values: number[]
No description.
- value: number
No description.
- precision: number | false
No description.
- step: number | false | number[]
No description.
- structure: string | false
No description.
- orientation: "vertical" | "horizontal"
No description.
- extend: ExtendList[]
No description.
- data: object
No description.
No description.
- initial: boolean
No description.
- activeTouchIDs: Map<number, HTMLDivElement>
No description.
No description.
- mouseDownPos: number
No description.
Live style of the slider track.
- currentThumbZ: number
Continuously advancing z-index that a thumb gets assigned when starting to drag it.
- uniqueWrapperClass: string
Contains a unique CSS class name that is added onto the slider wrapper. All extended CSS is put behind that class.
- styleModules: StyleModule[]
Holds all
StyleModule
s converted from the extendedStyle
s in order of ascending priority.Holds all extended plugin functions in order of ascending priority.
No description.
- static StyleModule: any
No description.
- static DOMHandler: DOMVariables
No description.
- static RuntimeTypeCheck: any
No description.
- static
ExtraCond: {nonNumberString: Condition,}
nonnegative: Condition,
instanceof: (item: any) => Condition No description.
- static BASE_STYLE: any
No description.
- static
methodArgs: {addEvent: [{}name: "event type",}, {
type: readonly [any]name: "event function",}, {
type: readonly [any]name: "event namespace",}],
optional: true,
type: readonly [readonly []any,]
any,
Condition
removeEvent: [{name: "event identifier/namespace",}],
type: readonly [readonly []any,],
Condition
readonly [any,]
any,
Condition
addThumb: [{name: "value",}, {
type: readonly [any]name: "targetIndex",}],
type: readonly [any],
optional: true
addMultipleThumbs: [{name: "...values",}],
type: readonly [any],
spread: true
removeThumb: [{name: "index or element",}]
type: readonly [any,],
Condition
optional: true No description.
- static
propertyData: {range: {}isDeepDefined: true,},
type: readonly [readonly []any,]
any
values: {isDeepDefined: true,},
type: readonly [any]
value: {type: readonly [any]},
precision: {type: readonly [readonly [any, Condition], readonly [any]]},
step: {type: readonly [},readonly []any,],
any
readonly [any,],
any
readonly [any]
structure: {constructorOnly: true,},
type: readonly [any,]
any
node: {readOnly: true},
nodes: {readOnly: true},
orientation: {type: readonly [any]},
classList: {constructorOnly: true,},
type: readonly [any,]
any
events: {constructorOnly: true,},
type: readonly [any,]
any
extend: {constructorOnly: true,},
type: readonly [any]
data: {constructorOnly: true,}
type: readonly [any,]
any No description.
- static eventTypes: readonly ["update", "start", "move", "end"]
No description.
- static
eventTypesSpecial: {change:$property: {}prefix: "change:",}
fn: (slider: Slider89, customProp: string, eventType: string) => void No description.
- static
availableEventTypes: Array<"update" | "start" | "move" | "end" | "change:$property">
Human-readable and concise list of all available event types.
- static
COUNTS: readonly ["first",]
"second",
"third",
"fourth",
"fifth",
"sixth",
"seventh",
"eighth",
"ninth" No description.
- static Error: __class
No description.
- static InitializationError: __class
No description.
- static PropertyError: __class
No description.
- static PropertyTypeError: __class
No description.
- static MethodArgTypeError: __class
No description.
- static MethodArgOmitError: __class
No description.
- static StructureError: __class
No description.
- static StructureParseError: __class
No description.
Get an object containing strings useful for getting distance and dimension information, automatically adapted to the slider's orientation.
- getTrackPadding(direction: StyleDirection): number
Get the padding of the track element for the given direction.
- getTrackOffset(direction: StyleDirection): number
Get the offset (border AND padding) of the track element for the given direction.
- getTrackPosition(direction: StyleDirection): number
Get the absolute pixel position of the active track relative to the window, at the specified direction.
The active track describes the track element minus any effective offsets (border and padding).
- getDistance(offset: number): number
Get the absolute pixel distance to the given offset in the active track, automatically adapted to the slider's orientation.
The active track describes the track element minus any effective offsets (border and padding).
Parameters
-
offset
: A point of the viewport at which to get the distance.
-
- getThumbDistance(thumb: HTMLDivElement): number
Get the absolute pixel distance of the given thumb element in the active track, automatically adapted to the slider's orientation.
This is anchored at the front of the thumb, so either the left or top edge.
Parameters
-
thumb
: The thumb element to get the distance of.
Remarks
Because of floating-point math, the result may be slightly imprecise and should not be compared directly with other values.
Slider89.floatIsEqual
is a convenient helper.-
- getThumbDistanceCentered(thumb: HTMLDivElement): number
Same as
getThumbDistance
but instead of being anchored at the thumb's left or top edge, the result is centered to the thumb.- getAbsoluteTrackSize(thumb: HTMLDivElement): number
Get the absolute pixel size of the absolute track, automatically adapted to the slider's current orientation.
The absolute track is the part of the track element that contributes to the dragged thumb, so minus any offsets (border and padding) and minus the thumb's width/height.
Parameters
-
thumb
: The thumb element to test the distance against.
-
- moveElementTranslate(element: HTMLElement,): void
distance: number Translate an element by the given absolute pixel distance.
Parameters
-
element
: The element to transform(translate), most likely a thumb on the track. -
distance
: The absolute pixel distance to translate the element by.
-
- moveElementRelative(element: HTMLElement,): void
ratio: number,
dimOffset: number | HTMLElement = element Move an element (most likely the thumb) using relative positioning (CSS "top" or "left" properties), automatically adapted to the slider's current orientation.
The benefit of relative positioning over translation is that nothing has to be recomputed if the parent element's dimensions change.
Parameters
-
element
: The element to move -
ratio
: The distance as percentage in the interval [0, 1] -
dimOffset
: A static offset that is added in relation to the total distance, OR a differing element, the size of which will be the offset.
Remarks
Moving an element this way is extremely costly for the browser. In Slider89, the thumb is moved using
translate
and only upon thumb release the movement is converted into a relative position. Please think twice before using this method in conjunction with a mouse event.-
- applyAllRelativeValues(newVals?: Partial): void
No description.
- applyRelativeValue(thumbIndex: number,): void
newVals?: Partial Apply the new value of the given index according to the passed property values and move the thumb accordingly.
Does not set the given values.
Parameters
-
thumbIndex
: The value/thumb index that should be recomputed. -
newVals
: New property values to apply, or none to recompute in-place.
-
- computeDistanceValue(thumb: HTMLDivElement,): number
distance: number,
absSize: number = ... Compute the resulting value of the given thumb at the given absolute pixel distance of the absolute track.
The absolute track is the part of the track element that contributes to the dragged thumb, so minus any offsets (border and padding) and minus the thumb's width/height.
Parameters
-
thumb
: The affected thumb. Only needs to be passed to get its dimensions. -
distance
: The distance to get the value for. -
absSize
: HERE FOR PERFORMANCE REASONS; CAN BE DISREGARDED. The absolute pixel dimensions of the affected thumb.
-
- computeRelativeValue(thumbIndex: number,): { value: number, prevRatio: number, ratio: number }
newVals?: Partial No description.
- addThumbElement(thumbValue: number,): void
thumbIndex: number = ... Add a new thumb element along with all of its descendants to
nodes
at the specified index (or push it to the end if unspecified).Remarks
This does not add a new value to
values
.- removeThumbElement(thumbIndex: number = -1): void
Remove a thumb element along with all of its descendants from
nodes
at the specified index (or the last thumb if unspecified).Remarks
This does not modify
values
in any way.- setThumbAttributes(thumb: HTMLDivElement,): void
thumbValue: number Set the required attributes to a thumb at the specified index.
Internal
- setValueWithUpdateEvent(value: number,): void
index: number = 0,
eventArg?: UIEvent Set a value at the specified (thumb) index and invoke an 'update' event if the values are not equal. You can also pass an event object as additional parameter for the event callback.
This method can be used by plugins when modifying the value in a non-trivial way (e.g. when changing the value with the arrow keys).
- setValueWithUpdateEventUnsafe(value: number,): void
index: number,
eventArg: UIEvent Same as
setValueWithUpdateEvent
but it is assumed thatvalue
is in its final state and does not need to be modified and checked further.Do not use this unless you know exactly what you're doing.
- getValueRatio(value: number = ...,): number
range: [number, number] = ... Get the ratio of the supplied value (or the slider's current value) in relation to the supplied range (or the slider's current range).
Parameters
-
value
: The value to get the ratio of. -
range
: The range to test the value against.
Returns The relation of `value` to `range` in a [0, 1] interval.
Remarks
The returned ratio can be used in
moveElementRelative
.-
- clampValueToStep(value: number,): number
step: number,
range: [number, number] Modify and return the passed value to match the confines of the given step. Is always clamped to the given range.
- clampValueToRange(value: number,): number
range: [number, number] Clamp the given
value
to the givenrange
, ensuring that the value does not exceed the range.- capThumbZIndex(): void
As soon as the current z-index counter (
currentThumbZ
) exceeds a certain threshold (currently, 10 times the amount of thumbs), reset the z-index counter back to 1 while preserving all thumb's z-index order.This is done so that a thumb's z-index does not interfere with other layouting when it gets too high.
- setThumbZIndex(thumb: HTMLDivElement): void
Set a thumb's z-index style such that it appears on top of all other thumbs.
Will only be invoked if more than one thumb is used.
- setDOMOrientation(orientation: "vertical" | "horizontal"): void
No description.
- toggleActiveClasses(thumb: HTMLDivElement,): void
operation: "add" | "remove" No description.
- touchStart(e: TouchEvent): void
No description.
- touchMove(e: TouchEvent): void
No description.
- touchEnd(e: TouchEvent): void
No description.
- mouseStart(e: MouseEvent,): void
thumbNode: HTMLDivElement = ... No description.
- mouseMove(e: MouseEvent): void
No description.
- mouseEnd(e: MouseEvent): void
No description.
- slideStart(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- slideMove(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- slideEnd(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- keyDown(e: KeyboardEvent): void
No description.
- defineInternalProperty<I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(target: WithCustom,): any
endpoint: Base,
item: I,
outline: PropertiesOutline[I] - defineInternalProperty<I extends `_${string}` | unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(target: WithCustom,): any
endpoint: WithCustom,
item: I No description.
- invokeInternalPropertyChange<I extends `_${string}` | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(item: I,): void
prevVal?: WithCustom[I] No description.
- invokeInternalDeepPropertyChange<I extends keyof Deep>(): void
No description.
- addEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): EventListenerID
No description.
- removeEvent(key: EventListenerID): false | Array<Callback<{value: any,}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: anyvalue: object,}> | Callback<{
prevVal: objectvalue: [number, number],}> | Callback<{
prevVal: [number, number],
keys: Array<string | number>value: number[],}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: number[],
keys: Array<string | number>value: number,}> | Callback<{
prevVal: numbervalue: number | false,}> | Callback<{
prevVal: number | falsevalue: number | false | number[],}> | Callback<{
prevVal: number | false | number[]value: string | false,}> | Callback<{
prevVal: string | falsevalue: "vertical" | "horizontal",}> | Callback<{
prevVal: "vertical" | "horizontal"value: ExtendList[],}> | Callback<{
prevVal: ExtendList[]value: number,}> | Callback<{
prevVal: number,
thumbIndex: number,
event: UIEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}>>
event: TouchEvent | MouseEvent No description.
- invokeEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): void
No description.
- checkEventType<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(type: T): boolean
No description.
- buildSlider(target: HTMLElement, replace: boolean): void
No description.
- testAndExtendConfig(): void
No description.
No description.
- callPlugins(): void
No description.
- addClassesToNodes(classList: Record<string, string[]>): void
Iterate over a
Props.Base.classList
and add all of its class names to the currentnodes
.- initializeProperties(config: Config,): void
properties: PropertiesOutline No description.
- initializeProperty<I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(item: I,): void
outline: PropertiesOutline[I] No description.
- testInitialTarget(target: HTMLElement): void
No description.
- testInitialConfig(config: Config): void
No description.
- testConfig(config: Config,): void
inExtension: boolean = false No description.
- checkProp(prop: unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend",): void
val: any,
inExtension: boolean = false No description.
- addThumb(value: number, index: number = ...): HTMLDivElement
Add a new thumb to the slider with the specified value, optionally at the specified index (if omitted, push it to the end).
Remarks
This is syntactic sugar for adding a thumb by overwriting
values
with an extended array.Returns The newly added thumb element.
- addMultipleThumbs(...values: number[]): HTMLDivElement[]
Add arbitrarily many thumbs to the slider with the specified values. They are always appended to the end of
values
.Remarks
This is just syntactic sugar for adding values by overwriting
values
with an extended array.Returns An array of all the newly added thumb elements in order.
- removeThumb(indexOrElement: number | HTMLDivElement = ...): HTMLDivElement
Remove a thumb by passing either the thumb element or the thumb/values index. If neither is passed, the last thumb is removed.
Remarks
This is just syntactic sugar for removing values by overwriting
values
with a subset of itself.Returns The removed thumb element.
- static selfCheckMethod(methodName: "addEvent" | "removeEvent" | "addThumb" | "addMultipleThumbs" | "removeThumb",): void
fullArgs: IArguments Check whether the supplied arguments match with the type of the supplied method name.
In this context, "type checking" means the custom runtime type check provided by
RuntimeTypeCheck
.This method needs to be called manually with its own
arguments
object. Thus, it is loosely assumed that every type checkable method calls it.- static floatIsEqual(val0: number, val1: number): boolean
Check for rough equality of two floats, with a sensible threshold that works well with Slider89.
- static getClosestNumber(val: number, arr: number[]): number
Get the number closest to a given number in a number array. number number number number. Now the word looks weird.
Parameters
-
val
: The number to check against. -
arr
: The non-empty array to perform the check on.
-
- static createElement<K extends keyof HTMLElementTagNameMap>(): HTMLElementTagNameMap[K]
Create a DOM element with additional classes and/or general attributes.
Parameters
-
attributes
: Either a list of classes or an object of attributes that should be added.
-
- static createChildElement<K extends keyof HTMLElementTagNameMap>(): HTMLElementTagNameMap[K]
Create a DOM element with additional classes and/or general attributes that is registered as the child of a specified parent node.
Parameters
-
attributes
: Either a list of classes or an object of attributes that should be added.
-
- static getUniqueClassName(): string
No description.
- static getMethodArgMessage(argInfo: any,): string
index: number No description.
- static arrayToListString(arr: any[]): string
No description.
class Setup extends DOM
This class handles everything related to the initial setup of the slider, including resolving and testing the config, registering properties and handling plugins, mixins and CSS.
- range: [number, number]
No description.
- values: number[]
No description.
- value: number
No description.
- precision: number | false
No description.
- step: number | false | number[]
No description.
- structure: string | false
No description.
- orientation: "vertical" | "horizontal"
No description.
- extend: ExtendList[]
No description.
- data: object
No description.
- properties: any
No description.
No description.
- initial: boolean
No description.
- activeTouchIDs: Map<number, HTMLDivElement>
No description.
No description.
- mouseDownPos: number
No description.
Live style of the slider track.
- currentThumbZ: number
Continuously advancing z-index that a thumb gets assigned when starting to drag it.
- uniqueWrapperClass: string
Contains a unique CSS class name that is added onto the slider wrapper. All extended CSS is put behind that class.
- styleModules: StyleModule[]
Holds all
StyleModule
s converted from the extendedStyle
s in order of ascending priority.Holds all extended plugin functions in order of ascending priority.
- static StyleModule: any
No description.
- static DOMHandler: DOMVariables
No description.
- static RuntimeTypeCheck: any
No description.
- static
ExtraCond: {nonNumberString: Condition,}
nonnegative: Condition,
instanceof: (item: any) => Condition No description.
- static BASE_STYLE: any
No description.
- static
methodArgs: {addEvent: [{}name: "event type",}, {
type: readonly [any]name: "event function",}, {
type: readonly [any]name: "event namespace",}],
optional: true,
type: readonly [readonly []any,]
any,
Condition
removeEvent: [{name: "event identifier/namespace",}],
type: readonly [readonly []any,],
Condition
readonly [any,]
any,
Condition
addThumb: [{name: "value",}, {
type: readonly [any]name: "targetIndex",}],
type: readonly [any],
optional: true
addMultipleThumbs: [{name: "...values",}],
type: readonly [any],
spread: true
removeThumb: [{name: "index or element",}]
type: readonly [any,],
Condition
optional: true No description.
- static
propertyData: {range: {}isDeepDefined: true,},
type: readonly [readonly []any,]
any
values: {isDeepDefined: true,},
type: readonly [any]
value: {type: readonly [any]},
precision: {type: readonly [readonly [any, Condition], readonly [any]]},
step: {type: readonly [},readonly []any,],
any
readonly [any,],
any
readonly [any]
structure: {constructorOnly: true,},
type: readonly [any,]
any
node: {readOnly: true},
nodes: {readOnly: true},
orientation: {type: readonly [any]},
classList: {constructorOnly: true,},
type: readonly [any,]
any
events: {constructorOnly: true,},
type: readonly [any,]
any
extend: {constructorOnly: true,},
type: readonly [any]
data: {constructorOnly: true,}
type: readonly [any,]
any No description.
- static eventTypes: readonly ["update", "start", "move", "end"]
No description.
- static
eventTypesSpecial: {change:$property: {}prefix: "change:",}
fn: (slider: Slider89, customProp: string, eventType: string) => void No description.
- static
availableEventTypes: Array<"update" | "start" | "move" | "end" | "change:$property">
Human-readable and concise list of all available event types.
- static
COUNTS: readonly ["first",]
"second",
"third",
"fourth",
"fifth",
"sixth",
"seventh",
"eighth",
"ninth" No description.
- static Error: __class
No description.
- static InitializationError: __class
No description.
- static PropertyError: __class
No description.
- static PropertyTypeError: __class
No description.
- static MethodArgTypeError: __class
No description.
- static MethodArgOmitError: __class
No description.
- static StructureError: __class
No description.
- static StructureParseError: __class
No description.
Get an object containing strings useful for getting distance and dimension information, automatically adapted to the slider's orientation.
- getTrackPadding(direction: StyleDirection): number
Get the padding of the track element for the given direction.
- getTrackOffset(direction: StyleDirection): number
Get the offset (border AND padding) of the track element for the given direction.
- getTrackPosition(direction: StyleDirection): number
Get the absolute pixel position of the active track relative to the window, at the specified direction.
The active track describes the track element minus any effective offsets (border and padding).
- getDistance(offset: number): number
Get the absolute pixel distance to the given offset in the active track, automatically adapted to the slider's orientation.
The active track describes the track element minus any effective offsets (border and padding).
Parameters
-
offset
: A point of the viewport at which to get the distance.
-
- getThumbDistance(thumb: HTMLDivElement): number
Get the absolute pixel distance of the given thumb element in the active track, automatically adapted to the slider's orientation.
This is anchored at the front of the thumb, so either the left or top edge.
Parameters
-
thumb
: The thumb element to get the distance of.
Remarks
Because of floating-point math, the result may be slightly imprecise and should not be compared directly with other values.
Slider89.floatIsEqual
is a convenient helper.-
- getThumbDistanceCentered(thumb: HTMLDivElement): number
Same as
getThumbDistance
but instead of being anchored at the thumb's left or top edge, the result is centered to the thumb.- getAbsoluteTrackSize(thumb: HTMLDivElement): number
Get the absolute pixel size of the absolute track, automatically adapted to the slider's current orientation.
The absolute track is the part of the track element that contributes to the dragged thumb, so minus any offsets (border and padding) and minus the thumb's width/height.
Parameters
-
thumb
: The thumb element to test the distance against.
-
- moveElementTranslate(element: HTMLElement,): void
distance: number Translate an element by the given absolute pixel distance.
Parameters
-
element
: The element to transform(translate), most likely a thumb on the track. -
distance
: The absolute pixel distance to translate the element by.
-
- moveElementRelative(element: HTMLElement,): void
ratio: number,
dimOffset: number | HTMLElement = element Move an element (most likely the thumb) using relative positioning (CSS "top" or "left" properties), automatically adapted to the slider's current orientation.
The benefit of relative positioning over translation is that nothing has to be recomputed if the parent element's dimensions change.
Parameters
-
element
: The element to move -
ratio
: The distance as percentage in the interval [0, 1] -
dimOffset
: A static offset that is added in relation to the total distance, OR a differing element, the size of which will be the offset.
Remarks
Moving an element this way is extremely costly for the browser. In Slider89, the thumb is moved using
translate
and only upon thumb release the movement is converted into a relative position. Please think twice before using this method in conjunction with a mouse event.-
- applyAllRelativeValues(newVals?: Partial): void
No description.
- applyRelativeValue(thumbIndex: number,): void
newVals?: Partial Apply the new value of the given index according to the passed property values and move the thumb accordingly.
Does not set the given values.
Parameters
-
thumbIndex
: The value/thumb index that should be recomputed. -
newVals
: New property values to apply, or none to recompute in-place.
-
- computeDistanceValue(thumb: HTMLDivElement,): number
distance: number,
absSize: number = ... Compute the resulting value of the given thumb at the given absolute pixel distance of the absolute track.
The absolute track is the part of the track element that contributes to the dragged thumb, so minus any offsets (border and padding) and minus the thumb's width/height.
Parameters
-
thumb
: The affected thumb. Only needs to be passed to get its dimensions. -
distance
: The distance to get the value for. -
absSize
: HERE FOR PERFORMANCE REASONS; CAN BE DISREGARDED. The absolute pixel dimensions of the affected thumb.
-
- computeRelativeValue(thumbIndex: number,): { value: number, prevRatio: number, ratio: number }
newVals?: Partial No description.
- addThumbElement(thumbValue: number,): void
thumbIndex: number = ... Add a new thumb element along with all of its descendants to
nodes
at the specified index (or push it to the end if unspecified).Remarks
This does not add a new value to
values
.- removeThumbElement(thumbIndex: number = -1): void
Remove a thumb element along with all of its descendants from
nodes
at the specified index (or the last thumb if unspecified).Remarks
This does not modify
values
in any way.- setThumbAttributes(thumb: HTMLDivElement,): void
thumbValue: number Set the required attributes to a thumb at the specified index.
Internal
- setValueWithUpdateEvent(value: number,): void
index: number = 0,
eventArg?: UIEvent Set a value at the specified (thumb) index and invoke an 'update' event if the values are not equal. You can also pass an event object as additional parameter for the event callback.
This method can be used by plugins when modifying the value in a non-trivial way (e.g. when changing the value with the arrow keys).
- setValueWithUpdateEventUnsafe(value: number,): void
index: number,
eventArg: UIEvent Same as
setValueWithUpdateEvent
but it is assumed thatvalue
is in its final state and does not need to be modified and checked further.Do not use this unless you know exactly what you're doing.
- getValueRatio(value: number = ...,): number
range: [number, number] = ... Get the ratio of the supplied value (or the slider's current value) in relation to the supplied range (or the slider's current range).
Parameters
-
value
: The value to get the ratio of. -
range
: The range to test the value against.
Returns The relation of `value` to `range` in a [0, 1] interval.
Remarks
The returned ratio can be used in
moveElementRelative
.-
- clampValueToStep(value: number,): number
step: number,
range: [number, number] Modify and return the passed value to match the confines of the given step. Is always clamped to the given range.
- clampValueToRange(value: number,): number
range: [number, number] Clamp the given
value
to the givenrange
, ensuring that the value does not exceed the range.- capThumbZIndex(): void
As soon as the current z-index counter (
currentThumbZ
) exceeds a certain threshold (currently, 10 times the amount of thumbs), reset the z-index counter back to 1 while preserving all thumb's z-index order.This is done so that a thumb's z-index does not interfere with other layouting when it gets too high.
- setThumbZIndex(thumb: HTMLDivElement): void
Set a thumb's z-index style such that it appears on top of all other thumbs.
Will only be invoked if more than one thumb is used.
- setDOMOrientation(orientation: "vertical" | "horizontal"): void
No description.
- toggleActiveClasses(thumb: HTMLDivElement,): void
operation: "add" | "remove" No description.
- touchStart(e: TouchEvent): void
No description.
- touchMove(e: TouchEvent): void
No description.
- touchEnd(e: TouchEvent): void
No description.
- mouseStart(e: MouseEvent,): void
thumbNode: HTMLDivElement = ... No description.
- mouseMove(e: MouseEvent): void
No description.
- mouseEnd(e: MouseEvent): void
No description.
- slideStart(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- slideMove(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- slideEnd(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- keyDown(e: KeyboardEvent): void
No description.
- defineInternalProperty<I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(target: WithCustom,): any
endpoint: Base,
item: I,
outline: PropertiesOutline[I] - defineInternalProperty<I extends `_${string}` | unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(target: WithCustom,): any
endpoint: WithCustom,
item: I No description.
- invokeInternalPropertyChange<I extends `_${string}` | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(item: I,): void
prevVal?: WithCustom[I] No description.
- invokeInternalDeepPropertyChange<I extends keyof Deep>(): void
No description.
- addEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): EventListenerID
No description.
- removeEvent(key: EventListenerID): false | Array<Callback<{value: any,}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: anyvalue: object,}> | Callback<{
prevVal: objectvalue: [number, number],}> | Callback<{
prevVal: [number, number],
keys: Array<string | number>value: number[],}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: number[],
keys: Array<string | number>value: number,}> | Callback<{
prevVal: numbervalue: number | false,}> | Callback<{
prevVal: number | falsevalue: number | false | number[],}> | Callback<{
prevVal: number | false | number[]value: string | false,}> | Callback<{
prevVal: string | falsevalue: "vertical" | "horizontal",}> | Callback<{
prevVal: "vertical" | "horizontal"value: ExtendList[],}> | Callback<{
prevVal: ExtendList[]value: number,}> | Callback<{
prevVal: number,
thumbIndex: number,
event: UIEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}>>
event: TouchEvent | MouseEvent No description.
- invokeEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): void
No description.
- checkEventType<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(type: T): boolean
No description.
- buildSlider(target: HTMLElement, replace: boolean): void
No description.
- testAndExtendConfig(): void
No description.
No description.
- callPlugins(): void
No description.
- addClassesToNodes(classList: Record<string, string[]>): void
Iterate over a
Props.Base.classList
and add all of its class names to the currentnodes
.- initializeProperties(config: Config,): void
properties: PropertiesOutline No description.
- initializeProperty<I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(item: I,): void
outline: PropertiesOutline[I] No description.
- testInitialTarget(target: HTMLElement): void
No description.
- testInitialConfig(config: Config): void
No description.
- testConfig(config: Config,): void
inExtension: boolean = false No description.
- checkProp(prop: unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend",): void
val: any,
inExtension: boolean = false No description.
- static selfCheckMethod(methodName: "addEvent" | "removeEvent" | "addThumb" | "addMultipleThumbs" | "removeThumb",): void
fullArgs: IArguments Check whether the supplied arguments match with the type of the supplied method name.
In this context, "type checking" means the custom runtime type check provided by
RuntimeTypeCheck
.This method needs to be called manually with its own
arguments
object. Thus, it is loosely assumed that every type checkable method calls it.- static getMethodArgMessage(argInfo: any,): string
index: number No description.
- static arrayToListString(arr: any[]): string
No description.
class DOM extends Definition
- range: [number, number]
No description.
- values: number[]
No description.
- value: number
No description.
- precision: number | false
No description.
- step: number | false | number[]
No description.
- structure: string | false
No description.
- orientation: "vertical" | "horizontal"
No description.
- extend: ExtendList[]
No description.
- data: object
No description.
- properties: any
No description.
No description.
- initial: boolean
No description.
- activeTouchIDs: Map<number, HTMLDivElement>
No description.
No description.
- mouseDownPos: number
No description.
Live style of the slider track.
- currentThumbZ: number
Continuously advancing z-index that a thumb gets assigned when starting to drag it.
- static StyleModule: any
No description.
- static DOMHandler: DOMVariables
No description.
- static RuntimeTypeCheck: any
No description.
- static
ExtraCond: {nonNumberString: Condition,}
nonnegative: Condition,
instanceof: (item: any) => Condition No description.
- static BASE_STYLE: any
No description.
- static
methodArgs: {addEvent: [{}name: "event type",}, {
type: readonly [any]name: "event function",}, {
type: readonly [any]name: "event namespace",}],
optional: true,
type: readonly [readonly []any,]
any,
Condition
removeEvent: [{name: "event identifier/namespace",}],
type: readonly [readonly []any,],
Condition
readonly [any,]
any,
Condition
addThumb: [{name: "value",}, {
type: readonly [any]name: "targetIndex",}],
type: readonly [any],
optional: true
addMultipleThumbs: [{name: "...values",}],
type: readonly [any],
spread: true
removeThumb: [{name: "index or element",}]
type: readonly [any,],
Condition
optional: true No description.
- static
propertyData: {range: {}isDeepDefined: true,},
type: readonly [readonly []any,]
any
values: {isDeepDefined: true,},
type: readonly [any]
value: {type: readonly [any]},
precision: {type: readonly [readonly [any, Condition], readonly [any]]},
step: {type: readonly [},readonly []any,],
any
readonly [any,],
any
readonly [any]
structure: {constructorOnly: true,},
type: readonly [any,]
any
node: {readOnly: true},
nodes: {readOnly: true},
orientation: {type: readonly [any]},
classList: {constructorOnly: true,},
type: readonly [any,]
any
events: {constructorOnly: true,},
type: readonly [any,]
any
extend: {constructorOnly: true,},
type: readonly [any]
data: {constructorOnly: true,}
type: readonly [any,]
any No description.
- static eventTypes: readonly ["update", "start", "move", "end"]
No description.
- static
eventTypesSpecial: {change:$property: {}prefix: "change:",}
fn: (slider: Slider89, customProp: string, eventType: string) => void No description.
- static
availableEventTypes: Array<"update" | "start" | "move" | "end" | "change:$property">
Human-readable and concise list of all available event types.
- static
COUNTS: readonly ["first",]
"second",
"third",
"fourth",
"fifth",
"sixth",
"seventh",
"eighth",
"ninth" No description.
- static Error: __class
No description.
- static InitializationError: __class
No description.
- static PropertyError: __class
No description.
- static PropertyTypeError: __class
No description.
- static MethodArgTypeError: __class
No description.
- static MethodArgOmitError: __class
No description.
- static StructureError: __class
No description.
- static StructureParseError: __class
No description.
Get an object containing strings useful for getting distance and dimension information, automatically adapted to the slider's orientation.
- getTrackPadding(direction: StyleDirection): number
Get the padding of the track element for the given direction.
- getTrackOffset(direction: StyleDirection): number
Get the offset (border AND padding) of the track element for the given direction.
- getTrackPosition(direction: StyleDirection): number
Get the absolute pixel position of the active track relative to the window, at the specified direction.
The active track describes the track element minus any effective offsets (border and padding).
- getDistance(offset: number): number
Get the absolute pixel distance to the given offset in the active track, automatically adapted to the slider's orientation.
The active track describes the track element minus any effective offsets (border and padding).
Parameters
-
offset
: A point of the viewport at which to get the distance.
-
- getThumbDistance(thumb: HTMLDivElement): number
Get the absolute pixel distance of the given thumb element in the active track, automatically adapted to the slider's orientation.
This is anchored at the front of the thumb, so either the left or top edge.
Parameters
-
thumb
: The thumb element to get the distance of.
Remarks
Because of floating-point math, the result may be slightly imprecise and should not be compared directly with other values.
Slider89.floatIsEqual
is a convenient helper.-
- getThumbDistanceCentered(thumb: HTMLDivElement): number
Same as
getThumbDistance
but instead of being anchored at the thumb's left or top edge, the result is centered to the thumb.- getAbsoluteTrackSize(thumb: HTMLDivElement): number
Get the absolute pixel size of the absolute track, automatically adapted to the slider's current orientation.
The absolute track is the part of the track element that contributes to the dragged thumb, so minus any offsets (border and padding) and minus the thumb's width/height.
Parameters
-
thumb
: The thumb element to test the distance against.
-
- moveElementTranslate(element: HTMLElement,): void
distance: number Translate an element by the given absolute pixel distance.
Parameters
-
element
: The element to transform(translate), most likely a thumb on the track. -
distance
: The absolute pixel distance to translate the element by.
-
- moveElementRelative(element: HTMLElement,): void
ratio: number,
dimOffset: number | HTMLElement = element Move an element (most likely the thumb) using relative positioning (CSS "top" or "left" properties), automatically adapted to the slider's current orientation.
The benefit of relative positioning over translation is that nothing has to be recomputed if the parent element's dimensions change.
Parameters
-
element
: The element to move -
ratio
: The distance as percentage in the interval [0, 1] -
dimOffset
: A static offset that is added in relation to the total distance, OR a differing element, the size of which will be the offset.
Remarks
Moving an element this way is extremely costly for the browser. In Slider89, the thumb is moved using
translate
and only upon thumb release the movement is converted into a relative position. Please think twice before using this method in conjunction with a mouse event.-
- applyAllRelativeValues(newVals?: Partial): void
No description.
- applyRelativeValue(thumbIndex: number,): void
newVals?: Partial Apply the new value of the given index according to the passed property values and move the thumb accordingly.
Does not set the given values.
Parameters
-
thumbIndex
: The value/thumb index that should be recomputed. -
newVals
: New property values to apply, or none to recompute in-place.
-
- computeDistanceValue(thumb: HTMLDivElement,): number
distance: number,
absSize: number = ... Compute the resulting value of the given thumb at the given absolute pixel distance of the absolute track.
The absolute track is the part of the track element that contributes to the dragged thumb, so minus any offsets (border and padding) and minus the thumb's width/height.
Parameters
-
thumb
: The affected thumb. Only needs to be passed to get its dimensions. -
distance
: The distance to get the value for. -
absSize
: HERE FOR PERFORMANCE REASONS; CAN BE DISREGARDED. The absolute pixel dimensions of the affected thumb.
-
- computeRelativeValue(thumbIndex: number,): { value: number, prevRatio: number, ratio: number }
newVals?: Partial No description.
- addThumbElement(thumbValue: number,): void
thumbIndex: number = ... Add a new thumb element along with all of its descendants to
nodes
at the specified index (or push it to the end if unspecified).Remarks
This does not add a new value to
values
.- removeThumbElement(thumbIndex: number = -1): void
Remove a thumb element along with all of its descendants from
nodes
at the specified index (or the last thumb if unspecified).Remarks
This does not modify
values
in any way.- setThumbAttributes(thumb: HTMLDivElement,): void
thumbValue: number Set the required attributes to a thumb at the specified index.
Internal
- setValueWithUpdateEvent(value: number,): void
index: number = 0,
eventArg?: UIEvent Set a value at the specified (thumb) index and invoke an 'update' event if the values are not equal. You can also pass an event object as additional parameter for the event callback.
This method can be used by plugins when modifying the value in a non-trivial way (e.g. when changing the value with the arrow keys).
- setValueWithUpdateEventUnsafe(value: number,): void
index: number,
eventArg: UIEvent Same as
setValueWithUpdateEvent
but it is assumed thatvalue
is in its final state and does not need to be modified and checked further.Do not use this unless you know exactly what you're doing.
- getValueRatio(value: number = ...,): number
range: [number, number] = ... Get the ratio of the supplied value (or the slider's current value) in relation to the supplied range (or the slider's current range).
Parameters
-
value
: The value to get the ratio of. -
range
: The range to test the value against.
Returns The relation of `value` to `range` in a [0, 1] interval.
Remarks
The returned ratio can be used in
moveElementRelative
.-
- clampValueToStep(value: number,): number
step: number,
range: [number, number] Modify and return the passed value to match the confines of the given step. Is always clamped to the given range.
- clampValueToRange(value: number,): number
range: [number, number] Clamp the given
value
to the givenrange
, ensuring that the value does not exceed the range.- capThumbZIndex(): void
As soon as the current z-index counter (
currentThumbZ
) exceeds a certain threshold (currently, 10 times the amount of thumbs), reset the z-index counter back to 1 while preserving all thumb's z-index order.This is done so that a thumb's z-index does not interfere with other layouting when it gets too high.
- setThumbZIndex(thumb: HTMLDivElement): void
Set a thumb's z-index style such that it appears on top of all other thumbs.
Will only be invoked if more than one thumb is used.
- setDOMOrientation(orientation: "vertical" | "horizontal"): void
No description.
- toggleActiveClasses(thumb: HTMLDivElement,): void
operation: "add" | "remove" No description.
- touchStart(e: TouchEvent): void
No description.
- touchMove(e: TouchEvent): void
No description.
- touchEnd(e: TouchEvent): void
No description.
- mouseStart(e: MouseEvent,): void
thumbNode: HTMLDivElement = ... No description.
- mouseMove(e: MouseEvent): void
No description.
- mouseEnd(e: MouseEvent): void
No description.
- slideStart(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- slideMove(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- slideEnd(thumbNode: HTMLDivElement,): void
e: ClientXY,
eventArg: TouchEvent | MouseEvent No description.
- keyDown(e: KeyboardEvent): void
No description.
- defineInternalProperty<I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(target: WithCustom,): any
endpoint: Base,
item: I,
outline: PropertiesOutline[I] - defineInternalProperty<I extends `_${string}` | unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(target: WithCustom,): any
endpoint: WithCustom,
item: I No description.
- invokeInternalPropertyChange<I extends `_${string}` | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(item: I,): void
prevVal?: WithCustom[I] No description.
- invokeInternalDeepPropertyChange<I extends keyof Deep>(): void
No description.
- addEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): EventListenerID
No description.
- removeEvent(key: EventListenerID): false | Array<Callback<{value: any,}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: anyvalue: object,}> | Callback<{
prevVal: objectvalue: [number, number],}> | Callback<{
prevVal: [number, number],
keys: Array<string | number>value: number[],}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: number[],
keys: Array<string | number>value: number,}> | Callback<{
prevVal: numbervalue: number | false,}> | Callback<{
prevVal: number | falsevalue: number | false | number[],}> | Callback<{
prevVal: number | false | number[]value: string | false,}> | Callback<{
prevVal: string | falsevalue: "vertical" | "horizontal",}> | Callback<{
prevVal: "vertical" | "horizontal"value: ExtendList[],}> | Callback<{
prevVal: ExtendList[]value: number,}> | Callback<{
prevVal: number,
thumbIndex: number,
event: UIEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}>>
event: TouchEvent | MouseEvent No description.
- invokeEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): void
No description.
- checkEventType<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(type: T): boolean
No description.
- static selfCheckMethod(methodName: "addEvent" | "removeEvent" | "addThumb" | "addMultipleThumbs" | "removeThumb",): void
fullArgs: IArguments Check whether the supplied arguments match with the type of the supplied method name.
In this context, "type checking" means the custom runtime type check provided by
RuntimeTypeCheck
.This method needs to be called manually with its own
arguments
object. Thus, it is loosely assumed that every type checkable method calls it.- static getMethodArgMessage(argInfo: any,): string
index: number No description.
- static arrayToListString(arr: any[]): string
No description.
class Definition extends Events
No description.
- range: [number, number]
No description.
- values: number[]
No description.
- value: number
No description.
- precision: number | false
No description.
- step: number | false | number[]
No description.
- structure: string | false
No description.
- orientation: "vertical" | "horizontal"
No description.
- extend: ExtendList[]
No description.
- data: object
No description.
- properties: any
No description.
No description.
- initial: boolean
No description.
- static StyleModule: any
No description.
- static DOMHandler: DOMVariables
No description.
- static RuntimeTypeCheck: any
No description.
- static
ExtraCond: {nonNumberString: Condition,}
nonnegative: Condition,
instanceof: (item: any) => Condition No description.
- static BASE_STYLE: any
No description.
- static
methodArgs: {addEvent: [{}name: "event type",}, {
type: readonly [any]name: "event function",}, {
type: readonly [any]name: "event namespace",}],
optional: true,
type: readonly [readonly []any,]
any,
Condition
removeEvent: [{name: "event identifier/namespace",}],
type: readonly [readonly []any,],
Condition
readonly [any,]
any,
Condition
addThumb: [{name: "value",}, {
type: readonly [any]name: "targetIndex",}],
type: readonly [any],
optional: true
addMultipleThumbs: [{name: "...values",}],
type: readonly [any],
spread: true
removeThumb: [{name: "index or element",}]
type: readonly [any,],
Condition
optional: true No description.
- static
propertyData: {range: {}isDeepDefined: true,},
type: readonly [readonly []any,]
any
values: {isDeepDefined: true,},
type: readonly [any]
value: {type: readonly [any]},
precision: {type: readonly [readonly [any, Condition], readonly [any]]},
step: {type: readonly [},readonly []any,],
any
readonly [any,],
any
readonly [any]
structure: {constructorOnly: true,},
type: readonly [any,]
any
node: {readOnly: true},
nodes: {readOnly: true},
orientation: {type: readonly [any]},
classList: {constructorOnly: true,},
type: readonly [any,]
any
events: {constructorOnly: true,},
type: readonly [any,]
any
extend: {constructorOnly: true,},
type: readonly [any]
data: {constructorOnly: true,}
type: readonly [any,]
any No description.
- static eventTypes: readonly ["update", "start", "move", "end"]
No description.
- static
eventTypesSpecial: {change:$property: {}prefix: "change:",}
fn: (slider: Slider89, customProp: string, eventType: string) => void No description.
- static
availableEventTypes: Array<"update" | "start" | "move" | "end" | "change:$property">
Human-readable and concise list of all available event types.
- static
COUNTS: readonly ["first",]
"second",
"third",
"fourth",
"fifth",
"sixth",
"seventh",
"eighth",
"ninth" No description.
- static Error: __class
No description.
- static InitializationError: __class
No description.
- static PropertyError: __class
No description.
- static PropertyTypeError: __class
No description.
- static MethodArgTypeError: __class
No description.
- static MethodArgOmitError: __class
No description.
- static StructureError: __class
No description.
- static StructureParseError: __class
No description.
- defineInternalProperty<I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(target: WithCustom,): any
endpoint: Base,
item: I,
outline: PropertiesOutline[I] - defineInternalProperty<I extends `_${string}` | unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(target: WithCustom,): any
endpoint: WithCustom,
item: I No description.
- invokeInternalPropertyChange<I extends `_${string}` | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend">(item: I,): void
prevVal?: WithCustom[I] No description.
- invokeInternalDeepPropertyChange<I extends keyof Deep>(): void
No description.
- addEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): EventListenerID
No description.
- removeEvent(key: EventListenerID): false | Array<Callback<{value: any,}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: anyvalue: object,}> | Callback<{
prevVal: objectvalue: [number, number],}> | Callback<{
prevVal: [number, number],
keys: Array<string | number>value: number[],}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: number[],
keys: Array<string | number>value: number,}> | Callback<{
prevVal: numbervalue: number | false,}> | Callback<{
prevVal: number | falsevalue: number | false | number[],}> | Callback<{
prevVal: number | false | number[]value: string | false,}> | Callback<{
prevVal: string | falsevalue: "vertical" | "horizontal",}> | Callback<{
prevVal: "vertical" | "horizontal"value: ExtendList[],}> | Callback<{
prevVal: ExtendList[]value: number,}> | Callback<{
prevVal: number,
thumbIndex: number,
event: UIEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}>>
event: TouchEvent | MouseEvent No description.
- invokeEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): void
No description.
- checkEventType<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(type: T): boolean
No description.
- static selfCheckMethod(methodName: "addEvent" | "removeEvent" | "addThumb" | "addMultipleThumbs" | "removeThumb",): void
fullArgs: IArguments Check whether the supplied arguments match with the type of the supplied method name.
In this context, "type checking" means the custom runtime type check provided by
RuntimeTypeCheck
.This method needs to be called manually with its own
arguments
object. Thus, it is loosely assumed that every type checkable method calls it.- static getMethodArgMessage(argInfo: any,): string
index: number No description.
- static arrayToListString(arr: any[]): string
No description.
class Events extends Base
- range: [number, number]
No description.
- values: number[]
No description.
- value: number
No description.
- precision: number | false
No description.
- step: number | false | number[]
No description.
- structure: string | false
No description.
- orientation: "vertical" | "horizontal"
No description.
- extend: ExtendList[]
No description.
- data: object
No description.
- properties: any
No description.
No description.
- initial: boolean
No description.
- static StyleModule: any
No description.
- static DOMHandler: DOMVariables
No description.
- static RuntimeTypeCheck: any
No description.
- static
ExtraCond: {nonNumberString: Condition,}
nonnegative: Condition,
instanceof: (item: any) => Condition No description.
- static BASE_STYLE: any
No description.
- static
methodArgs: {addEvent: [{}name: "event type",}, {
type: readonly [any]name: "event function",}, {
type: readonly [any]name: "event namespace",}],
optional: true,
type: readonly [readonly []any,]
any,
Condition
removeEvent: [{name: "event identifier/namespace",}],
type: readonly [readonly []any,],
Condition
readonly [any,]
any,
Condition
addThumb: [{name: "value",}, {
type: readonly [any]name: "targetIndex",}],
type: readonly [any],
optional: true
addMultipleThumbs: [{name: "...values",}],
type: readonly [any],
spread: true
removeThumb: [{name: "index or element",}]
type: readonly [any,],
Condition
optional: true No description.
- static
propertyData: {range: {}isDeepDefined: true,},
type: readonly [readonly []any,]
any
values: {isDeepDefined: true,},
type: readonly [any]
value: {type: readonly [any]},
precision: {type: readonly [readonly [any, Condition], readonly [any]]},
step: {type: readonly [},readonly []any,],
any
readonly [any,],
any
readonly [any]
structure: {constructorOnly: true,},
type: readonly [any,]
any
node: {readOnly: true},
nodes: {readOnly: true},
orientation: {type: readonly [any]},
classList: {constructorOnly: true,},
type: readonly [any,]
any
events: {constructorOnly: true,},
type: readonly [any,]
any
extend: {constructorOnly: true,},
type: readonly [any]
data: {constructorOnly: true,}
type: readonly [any,]
any No description.
- static eventTypes: readonly ["update", "start", "move", "end"]
No description.
- static
eventTypesSpecial: {change:$property: {}prefix: "change:",}
fn: (slider: Slider89, customProp: string, eventType: string) => void No description.
- static
availableEventTypes: Array<"update" | "start" | "move" | "end" | "change:$property">
Human-readable and concise list of all available event types.
- static
COUNTS: readonly ["first",]
"second",
"third",
"fourth",
"fifth",
"sixth",
"seventh",
"eighth",
"ninth" No description.
- static Error: __class
No description.
- static InitializationError: __class
No description.
- static PropertyError: __class
No description.
- static PropertyTypeError: __class
No description.
- static MethodArgTypeError: __class
No description.
- static MethodArgOmitError: __class
No description.
- static StructureError: __class
No description.
- static StructureParseError: __class
No description.
- addEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): EventListenerID
No description.
- removeEvent(key: EventListenerID): false | Array<Callback<{value: any,}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: anyvalue: object,}> | Callback<{
prevVal: objectvalue: [number, number],}> | Callback<{
prevVal: [number, number],
keys: Array<string | number>value: number[],}> | Callback<{}> | Callback<{}> | Callback<{
prevVal: number[],
keys: Array<string | number>value: number,}> | Callback<{
prevVal: numbervalue: number | false,}> | Callback<{
prevVal: number | falsevalue: number | false | number[],}> | Callback<{
prevVal: number | false | number[]value: string | false,}> | Callback<{
prevVal: string | falsevalue: "vertical" | "horizontal",}> | Callback<{
prevVal: "vertical" | "horizontal"value: ExtendList[],}> | Callback<{
prevVal: ExtendList[]value: number,}> | Callback<{
prevVal: number,
thumbIndex: number,
event: UIEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}> | Callback<{
event: TouchEvent | MouseEventthumbIndex: number,}>>
event: TouchEvent | MouseEvent No description.
- invokeEvent<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(): void
No description.
- checkEventType<T extends `change:_${string}` | "change:classList" | "change:events" | "change:data" | "change:range" | "change:values" | "change:node" | "change:nodes" | "change:value" | "change:precision" | "change:step" | "change:structure" | "change:orientation" | "change:extend" | "update" | "start" | "move" | "end">(type: T): boolean
No description.
- static selfCheckMethod(methodName: "addEvent" | "removeEvent" | "addThumb" | "addMultipleThumbs" | "removeThumb",): void
fullArgs: IArguments Check whether the supplied arguments match with the type of the supplied method name.
In this context, "type checking" means the custom runtime type check provided by
RuntimeTypeCheck
.This method needs to be called manually with its own
arguments
object. Thus, it is loosely assumed that every type checkable method calls it.- static getMethodArgMessage(argInfo: any,): string
index: number No description.
- static arrayToListString(arr: any[]): string
No description.
class Base extends SliderError
- range: [number, number]
No description.
- values: number[]
No description.
- value: number
No description.
- precision: number | false
No description.
- step: number | false | number[]
No description.
- structure: string | false
No description.
- orientation: "vertical" | "horizontal"
No description.
- extend: ExtendList[]
No description.
- data: object
No description.
- properties: any
No description.
No description.
- initial: boolean
No description.
- static StyleModule: any
No description.
- static DOMHandler: DOMVariables
No description.
- static RuntimeTypeCheck: any
No description.
- static
ExtraCond: {nonNumberString: Condition,}
nonnegative: Condition,
instanceof: (item: any) => Condition No description.
- static BASE_STYLE: any
No description.
- static
methodArgs: {addEvent: [{}name: "event type",}, {
type: readonly [any]name: "event function",}, {
type: readonly [any]name: "event namespace",}],
optional: true,
type: readonly [readonly []any,]
any,
Condition
removeEvent: [{name: "event identifier/namespace",}],
type: readonly [readonly []any,],
Condition
readonly [any,]
any,
Condition
addThumb: [{name: "value",}, {
type: readonly [any]name: "targetIndex",}],
type: readonly [any],
optional: true
addMultipleThumbs: [{name: "...values",}],
type: readonly [any],
spread: true
removeThumb: [{name: "index or element",}]
type: readonly [any,],
Condition
optional: true No description.
- static
propertyData: {range: {}isDeepDefined: true,},
type: readonly [readonly []any,]
any
values: {isDeepDefined: true,},
type: readonly [any]
value: {type: readonly [any]},
precision: {type: readonly [readonly [any, Condition], readonly [any]]},
step: {type: readonly [},readonly []any,],
any
readonly [any,],
any
readonly [any]
structure: {constructorOnly: true,},
type: readonly [any,]
any
node: {readOnly: true},
nodes: {readOnly: true},
orientation: {type: readonly [any]},
classList: {constructorOnly: true,},
type: readonly [any,]
any
events: {constructorOnly: true,},
type: readonly [any,]
any
extend: {constructorOnly: true,},
type: readonly [any]
data: {constructorOnly: true,}
type: readonly [any,]
any No description.
- static
COUNTS: readonly ["first",]
"second",
"third",
"fourth",
"fifth",
"sixth",
"seventh",
"eighth",
"ninth" No description.
- static Error: __class
No description.
- static InitializationError: __class
No description.
- static PropertyError: __class
No description.
- static PropertyTypeError: __class
No description.
- static MethodArgTypeError: __class
No description.
- static MethodArgOmitError: __class
No description.
- static StructureError: __class
No description.
- static StructureParseError: __class
No description.
- static selfCheckMethod(methodName: "addEvent" | "removeEvent" | "addThumb" | "addMultipleThumbs" | "removeThumb",): void
fullArgs: IArguments Check whether the supplied arguments match with the type of the supplied method name.
In this context, "type checking" means the custom runtime type check provided by
RuntimeTypeCheck
.This method needs to be called manually with its own
arguments
object. Thus, it is loosely assumed that every type checkable method calls it.- static getMethodArgMessage(argInfo: any,): string
index: number No description.
- static arrayToListString(arr: any[]): string
No description.
class SliderError
No description.
- static
COUNTS: readonly ["first",]
"second",
"third",
"fourth",
"fifth",
"sixth",
"seventh",
"eighth",
"ninth" No description.
- static Error: __class
No description.
- static InitializationError: __class
No description.
- static PropertyError: __class
No description.
- static PropertyTypeError: __class
No description.
- static MethodArgTypeError: __class
No description.
- static MethodArgOmitError: __class
No description.
- static StructureError: __class
No description.
- static StructureParseError: __class
No description.
- static getMethodArgMessage(argInfo: any,): string
index: number No description.
- static arrayToListString(arr: any[]): string
No description.
class DOMVariables extends DOMBuilder
No description.
A basic thumb node used for cloning.
No description.
- baseElements: Record<string, HTMLElement>
No description.
Keeps track of structure variables and their respective variable strings which are used in the thumb and its descendants.
- thumbEvents: Record<string, EventListenerOrEventListenerObject>
No description.
No description.
- thumbChildren: string[]
No description.
- static
specialVariables: {tag_node: {}getter: (node: any) => any},
thumb_index: {thumbOnly: true,},
getter: (node: HTMLDivElement, slider: Slider89, baseName: string) => number
thumb_value: {thumbOnly: true,}
getter: (node: HTMLDivElement, slider: Slider89, baseName: string) => number Special variables inside the structure system. Instead of being linked to properties, these can call arbitrary functions.
- static specialVariableProxy: Partial
Links
specialVariables
to potential slider properties they depend on, so that special variables get updated when the assigned property updates.No description.
- createSliderNode(thumbCount: number,): Mult
structureStr: string | false,
wrapper: HTMLElement No description.
- addThumbToNodes(nodes: Mult,): HTMLDivElement
thumbIndex: number Add a new thumb element with all of its descendants to the passed
Properties.Base.nodes
at the specified index (can be negative, counting backwards).- removeThumbFromNodes(nodes: Mult,): HTMLDivElement
thumbIndex: number Remove a thumb and all of its descendants from the passed
Properties.Base.nodes
at the specified index (can be negative, counting backwards).- nodeHasBaseElementOwner(node: Node): string | false
No description.
- updatePotentialVariable(propName: VariableName): void
No description.
- updateAllVariables(): void
No description.
- expandAllBaseElementVariables(): void
No description.
- parseStructure(structureStr: string,): Partial<Single>
slider: HTMLElement No description.
- assembleElement<T extends string>(node: Partial<Single>,): T extends "div" ? HTMLDivElement : HTMLElement
name: string,
nameStack: string[],
tag?: T,
content?: string,
attributes?: string No description.
- static getNodeOwner(node: Node): HTMLElement
No description.
- static findNodeChildren(): Element[]
Recursively iterate through a node's children, collecting them in an array in order. When used on a thumb node, the result is analogous to
thumbChildren
.Parameters
-
node
: The input node.
Returns All children of the input node.
-
class DOMBuilder extends StructureParser
No description.
A basic thumb node used for cloning.
No description.
- baseElements: Record<string, HTMLElement>
No description.
Keeps track of structure variables and their respective variable strings which are used in the thumb and its descendants.
- thumbEvents: Record<string, EventListenerOrEventListenerObject>
No description.
No description.
- thumbChildren: string[]
No description.
- static
specialVariables: {tag_node: {}getter: (node: any) => any},
thumb_index: {thumbOnly: true,},
getter: (node: HTMLDivElement, slider: Slider89, baseName: string) => number
thumb_value: {thumbOnly: true,}
getter: (node: HTMLDivElement, slider: Slider89, baseName: string) => number Special variables inside the structure system. Instead of being linked to properties, these can call arbitrary functions.
- static specialVariableProxy: Partial
Links
specialVariables
to potential slider properties they depend on, so that special variables get updated when the assigned property updates.No description.
- createSliderNode(thumbCount: number,): Mult
structureStr: string | false,
wrapper: HTMLElement No description.
- addThumbToNodes(nodes: Mult,): HTMLDivElement
thumbIndex: number Add a new thumb element with all of its descendants to the passed
Properties.Base.nodes
at the specified index (can be negative, counting backwards).- removeThumbFromNodes(nodes: Mult,): HTMLDivElement
thumbIndex: number Remove a thumb and all of its descendants from the passed
Properties.Base.nodes
at the specified index (can be negative, counting backwards).- nodeHasBaseElementOwner(node: Node): string | false
No description.
- parseStructure(structureStr: string,): Partial<Single>
slider: HTMLElement No description.
- assembleElement<T extends string>(node: Partial<Single>,): T extends "div" ? HTMLDivElement : HTMLElement
name: string,
nameStack: string[],
tag?: T,
content?: string,
attributes?: string No description.
- static getNodeOwner(node: Node): HTMLElement
No description.
- static findNodeChildren(): Element[]
Recursively iterate through a node's children, collecting them in an array in order. When used on a thumb node, the result is analogous to
thumbChildren
.Parameters
-
node
: The input node.
Returns All children of the input node.
-
class StructureParser
- StructureParser(vals: Vals): StructureParser
No description.
No description.
- thumbChildren: string[]
No description.
- static
specialVariables: {tag_node: {}getter: (node: any) => any},
thumb_index: {thumbOnly: true,},
getter: (node: HTMLDivElement, slider: Slider89, baseName: string) => number
thumb_value: {thumbOnly: true,}
getter: (node: HTMLDivElement, slider: Slider89, baseName: string) => number Special variables inside the structure system. Instead of being linked to properties, these can call arbitrary functions.
- static specialVariableProxy: Partial
Links
specialVariables
to potential slider properties they depend on, so that special variables get updated when the assigned property updates.No description.
- parseStructure(structureStr: string,): Partial<Single>
slider: HTMLElement No description.
- assembleElement<T extends string>(node: Partial<Single>,): T extends "div" ? HTMLDivElement : HTMLElement
name: string,
nameStack: string[],
tag?: T,
content?: string,
attributes?: string No description.
class Style
Simple class used for registering reusable CSS rules that can be applied to a slider.
Designed to be used in conjunction with StyleModule
.
- getNewStyleModule(wrapperClass: string): any
No description.
namespace PropertyNode
- type KnownMult: {}
No description.
- type Single: KnownSingle & Record<string, HTMLElement>
No description.
- type Mult: KnownMult & Record<string, HTMLElement[]>
No description.
interface KnownSingle
No description.
No description.
No description.
namespace Properties
- type CustomPropertyName: `_${string}`
No description.
- type
Base: Mergable & Deep & Readonly & {value: number,}
precision: number | false,
step: number | number[] | false,
structure: string | false,
orientation: "vertical" | "horizontal",
extend: ExtendList[] No description.
- type Custom: Record<CustomPropertyName, any>
No description.
- type WithCustom: Base & Custom
No description.
- type WithFalseyMergable: {}
No description.
- type ConfigFull: WithFalseyMergable | WithCustom
Non-partial interface of all properties allowed in the configuration. Unlike in the final slider object, properties of
Mergable
may also assumefalse
here.See also
Config
- type Config: Partial<ConfigFull>
No description.
interface Deep
interface Readonly
interface Mergable
Represents all properties that will be merged in a special way when
using Slider89.extend
. Because of this, all of these properties
may assume false
in the config (Config
), and ONLY there,
which disables the merging for any values below.
- data: object
No description.
interface Vals implements WithCustom
- range: [number, number]
No description.
- values: number[]
No description.
- data: object
No description.
- value: number
No description.
- precision: number | false
No description.
- step: number | false | number[]
No description.
- structure: string | false
No description.
- orientation: "vertical" | "horizontal"
No description.
- extend: ExtendList[]
No description.
- readonly $intermediateThis: Deep
No description.
- readonly $intermediateVals: Deep
No description.
namespace Operation
- type PostSetter<I extends keyof Base>: (val: Type<I>, prevVal: Type<I>) => void | boolean
No description.
namespace EventType
- type SpecialAbbr: keyof eventTypesSpecial
No description.
- type Basic: eventTypes[number]
No description.
- type Special: `change:${keyof WithCustom}`
No description.
interface DirectionRect
Contains strings that are useful for getting distance and dimension information, adapted to the slider's current orientation.