type EventList: {
[T in keyof EventMap]: Array<EventMap[T]>
}

No description.

type PluginCallback: (slider: Slider89) => void

No description.

No description.

type PropertyInfo<Prop>: Prop extends keyof Readonly
? {
readOnly: true
}
: {
constructorOnly: boolean,
isDeepDefined: boolean,
type: Descriptor
}

No description.

No description.

type StyleDirection: "top" | "right" | "bottom" | "left"

No description.

type RecomputationNewVals: Partial<Pick<Base, "value" | "range" | "step">>

No description.

type Callback<Args>: (evt: Args & { slider: Slider89 }) => void

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: Deep[T],
prevVal: Deep[T],
keys: Array<string | number>
}
: {
value: WithCustom[T],
prevVal: WithCustom[T]
}
}

No description.

type EventMap: {
[E in keyof EventArgs]: Callback<EventArgs[E]>
}

Map of available event types along with their accepted callbacks.

type EventListenerID: number | string

No description.

type PropertiesOutline: {
[Prop in keyof Base]: PropertyOutline.self<Prop>
}

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,
config?: false | Config,
replace: boolean = false
): Slider89

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.

No description.

No description.

orientation: "vertical" | "horizontal"

No description.

classList: Record<string, string[]>

No description.

No description.

No description.

data: object

No description.

No description.

No description.

initial: boolean

No description.

No description.

No description.

mouseDownPos: number

No description.

Live style of the slider track.

Continuously advancing z-index that a thumb gets assigned when starting to drag it.

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 StyleModules converted from the extended Styles in order of ascending priority.

Holds all extended plugin functions in order of ascending priority.

Holds all extended configuration objects in order of ascending priority.

No description.

static StyleModule: any

No description.

static Style: Style

No description.

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.

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.

Same as getThumbDistance but instead of being anchored at the thumb's left or top edge, the result is centered to the thumb.

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,
distance: number
): void

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,
ratio: number,
dimOffset: number | HTMLElement = element
): void

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.

No description.

applyRelativeValue(
thumbIndex: number,
newVals?: Partial
): void

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,
distance: number,
absSize: number = ...
): 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,
newVals?: Partial
): { value: number, prevRatio: number, ratio: number }

No description.

addThumbElement(
thumbValue: number,
thumbIndex: number = ...
): void

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,
thumbValue: number
): void

Set the required attributes to a thumb at the specified index.

Internal

setValueWithUpdateEvent(
value: number,
index: number = 0,
eventArg?: UIEvent
): void

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,
index: number,
eventArg: UIEvent
): void

Same as setValueWithUpdateEvent but it is assumed that value 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 = ...,
range: [number, 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,
step: number,
range: [number, 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,
range: [number, number]
): number

Clamp the given value to the given range, ensuring that the value does not exceed the range.

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.

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,
operation: "add" | "remove"
): void

No description.

No description.

No description.

No description.

mouseStart(
e: MouseEvent,
thumbNode: HTMLDivElement = ...
): void

No description.

No description.

No description.

slideStart(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

slideMove(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

slideEnd(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

No description.

defineInternalProperty<
I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
target: WithCustom,
endpoint: Base,
item: I,
outline: PropertiesOutline[I]
): any
defineInternalProperty<
I extends `_${string}` | unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
target: WithCustom,
endpoint: WithCustom,
item: I
): any

No description.

invokeInternalPropertyChange<
I extends `_${string}` | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
item: I,
prevVal?: WithCustom[I]
): void

No description.

invokeInternalDeepPropertyChange<I extends keyof Deep>(
item: I,
prevVal: Deep[I],
deepKey?: string | number
): 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"
>(
type: T,
fn: EventMap[T],
customID?: string
): EventListenerID

No description.

removeEvent(): false | Array<Callback<{
value: any,
prevVal: any
}
> |
Callback<{
value: Record<string, string[]>,
prevVal: Record<string, string[]>
}
> |
Callback<{
value: Partial<EventList>,
prevVal: Partial<EventList>
}
> |
Callback<{
value: object,
prevVal: object
}
> |
Callback<{
value: [number, number],
prevVal: [number, number],
keys: Array<string | number>
}
> |
Callback<{
value: number[],
prevVal: number[],
keys: Array<string | number>
}
> |
Callback<{
value: Single,
prevVal: Single
}
> |
Callback<{
value: Mult,
prevVal: Mult
}
> |
Callback<{
value: number,
prevVal: number
}
> |
Callback<{
value: number | false,
prevVal: number | false
}
> |
Callback<{
value: number | false | number[],
prevVal: number | false | number[]
}
> |
Callback<{
value: string | false,
prevVal: string | false
}
> |
Callback<{
value: "vertical" | "horizontal",
prevVal: "vertical" | "horizontal"
}
> |
Callback<{
value: ExtendList[],
prevVal: ExtendList[]
}
> |
Callback<{
value: number,
prevVal: number,
thumbIndex: number,
event: UIEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: 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"
>(
type: T,
arg: EventArgs[T]
): 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(
config: Readonly<Config>,
targetConf: Config = config,
inExtension: boolean = false
): void

No description.

extendProperties(
mixin: Readonly<Config>,
parentConf: Readonly<Config>,
targetConf: Config
): void

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 current nodes.

initializeProperties(
config: Config,
properties: PropertiesOutline
): void

No description.

initializeProperty<
I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
item: I,
outline: PropertiesOutline[I]
): void

No description.

No description.

testInitialConfig(config: Config): void

No description.

testConfig(
config: Config,
inExtension: boolean = false
): void

No description.

checkProp(
prop: unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend",
val: any,
inExtension: boolean = false
): void

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",
fullArgs: IArguments
): void

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>(
tagName: K,
attributes?: string[] | Record<string, string | string[]>
): 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
>(
tagName: K,
parent: Node,
attributes?: string[] | Record<string, string | string[]>
): 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,
index: number
): string

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.

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.

No description.

No description.

orientation: "vertical" | "horizontal"

No description.

classList: Record<string, string[]>

No description.

No description.

No description.

data: object

No description.

No description.

No description.

No description.

initial: boolean

No description.

No description.

No description.

mouseDownPos: number

No description.

Live style of the slider track.

Continuously advancing z-index that a thumb gets assigned when starting to drag it.

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 StyleModules converted from the extended Styles in order of ascending priority.

Holds all extended plugin functions in order of ascending priority.

Holds all extended configuration objects in order of ascending priority.

static StyleModule: any

No description.

static Style: Style

No description.

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.

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.

Same as getThumbDistance but instead of being anchored at the thumb's left or top edge, the result is centered to the thumb.

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,
distance: number
): void

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,
ratio: number,
dimOffset: number | HTMLElement = element
): void

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.

No description.

applyRelativeValue(
thumbIndex: number,
newVals?: Partial
): void

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,
distance: number,
absSize: number = ...
): 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,
newVals?: Partial
): { value: number, prevRatio: number, ratio: number }

No description.

addThumbElement(
thumbValue: number,
thumbIndex: number = ...
): void

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,
thumbValue: number
): void

Set the required attributes to a thumb at the specified index.

Internal

setValueWithUpdateEvent(
value: number,
index: number = 0,
eventArg?: UIEvent
): void

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,
index: number,
eventArg: UIEvent
): void

Same as setValueWithUpdateEvent but it is assumed that value 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 = ...,
range: [number, 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,
step: number,
range: [number, 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,
range: [number, number]
): number

Clamp the given value to the given range, ensuring that the value does not exceed the range.

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.

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,
operation: "add" | "remove"
): void

No description.

No description.

No description.

No description.

mouseStart(
e: MouseEvent,
thumbNode: HTMLDivElement = ...
): void

No description.

No description.

No description.

slideStart(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

slideMove(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

slideEnd(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

No description.

defineInternalProperty<
I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
target: WithCustom,
endpoint: Base,
item: I,
outline: PropertiesOutline[I]
): any
defineInternalProperty<
I extends `_${string}` | unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
target: WithCustom,
endpoint: WithCustom,
item: I
): any

No description.

invokeInternalPropertyChange<
I extends `_${string}` | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
item: I,
prevVal?: WithCustom[I]
): void

No description.

invokeInternalDeepPropertyChange<I extends keyof Deep>(
item: I,
prevVal: Deep[I],
deepKey?: string | number
): 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"
>(
type: T,
fn: EventMap[T],
customID?: string
): EventListenerID

No description.

removeEvent(): false | Array<Callback<{
value: any,
prevVal: any
}
> |
Callback<{
value: Record<string, string[]>,
prevVal: Record<string, string[]>
}
> |
Callback<{
value: Partial<EventList>,
prevVal: Partial<EventList>
}
> |
Callback<{
value: object,
prevVal: object
}
> |
Callback<{
value: [number, number],
prevVal: [number, number],
keys: Array<string | number>
}
> |
Callback<{
value: number[],
prevVal: number[],
keys: Array<string | number>
}
> |
Callback<{
value: Single,
prevVal: Single
}
> |
Callback<{
value: Mult,
prevVal: Mult
}
> |
Callback<{
value: number,
prevVal: number
}
> |
Callback<{
value: number | false,
prevVal: number | false
}
> |
Callback<{
value: number | false | number[],
prevVal: number | false | number[]
}
> |
Callback<{
value: string | false,
prevVal: string | false
}
> |
Callback<{
value: "vertical" | "horizontal",
prevVal: "vertical" | "horizontal"
}
> |
Callback<{
value: ExtendList[],
prevVal: ExtendList[]
}
> |
Callback<{
value: number,
prevVal: number,
thumbIndex: number,
event: UIEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: 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"
>(
type: T,
arg: EventArgs[T]
): 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(
config: Readonly<Config>,
targetConf: Config = config,
inExtension: boolean = false
): void

No description.

extendProperties(
mixin: Readonly<Config>,
parentConf: Readonly<Config>,
targetConf: Config
): void

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 current nodes.

initializeProperties(
config: Config,
properties: PropertiesOutline
): void

No description.

initializeProperty<
I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
item: I,
outline: PropertiesOutline[I]
): void

No description.

No description.

testInitialConfig(config: Config): void

No description.

testConfig(
config: Config,
inExtension: boolean = false
): void

No description.

checkProp(
prop: unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend",
val: any,
inExtension: boolean = false
): void

No description.

static selfCheckMethod(
methodName: "addEvent" | "removeEvent" | "addThumb" | "addMultipleThumbs" | "removeThumb",
fullArgs: IArguments
): void

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,
index: number
): string

No description.

static arrayToListString(arr: any[]): string

No description.

class DOM extends Definition

DOM(): DOM

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.

No description.

No description.

orientation: "vertical" | "horizontal"

No description.

classList: Record<string, string[]>

No description.

No description.

No description.

data: object

No description.

No description.

No description.

No description.

initial: boolean

No description.

No description.

No description.

mouseDownPos: number

No description.

Live style of the slider track.

Continuously advancing z-index that a thumb gets assigned when starting to drag it.

static StyleModule: any

No description.

static Style: Style

No description.

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.

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.

Same as getThumbDistance but instead of being anchored at the thumb's left or top edge, the result is centered to the thumb.

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,
distance: number
): void

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,
ratio: number,
dimOffset: number | HTMLElement = element
): void

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.

No description.

applyRelativeValue(
thumbIndex: number,
newVals?: Partial
): void

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,
distance: number,
absSize: number = ...
): 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,
newVals?: Partial
): { value: number, prevRatio: number, ratio: number }

No description.

addThumbElement(
thumbValue: number,
thumbIndex: number = ...
): void

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,
thumbValue: number
): void

Set the required attributes to a thumb at the specified index.

Internal

setValueWithUpdateEvent(
value: number,
index: number = 0,
eventArg?: UIEvent
): void

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,
index: number,
eventArg: UIEvent
): void

Same as setValueWithUpdateEvent but it is assumed that value 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 = ...,
range: [number, 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,
step: number,
range: [number, 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,
range: [number, number]
): number

Clamp the given value to the given range, ensuring that the value does not exceed the range.

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.

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,
operation: "add" | "remove"
): void

No description.

No description.

No description.

No description.

mouseStart(
e: MouseEvent,
thumbNode: HTMLDivElement = ...
): void

No description.

No description.

No description.

slideStart(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

slideMove(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

slideEnd(
thumbNode: HTMLDivElement,
e: ClientXY,
eventArg: TouchEvent | MouseEvent
): void

No description.

No description.

defineInternalProperty<
I extends unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
target: WithCustom,
endpoint: Base,
item: I,
outline: PropertiesOutline[I]
): any
defineInternalProperty<
I extends `_${string}` | unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
target: WithCustom,
endpoint: WithCustom,
item: I
): any

No description.

invokeInternalPropertyChange<
I extends `_${string}` | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
item: I,
prevVal?: WithCustom[I]
): void

No description.

invokeInternalDeepPropertyChange<I extends keyof Deep>(
item: I,
prevVal: Deep[I],
deepKey?: string | number
): 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"
>(
type: T,
fn: EventMap[T],
customID?: string
): EventListenerID

No description.

removeEvent(): false | Array<Callback<{
value: any,
prevVal: any
}
> |
Callback<{
value: Record<string, string[]>,
prevVal: Record<string, string[]>
}
> |
Callback<{
value: Partial<EventList>,
prevVal: Partial<EventList>
}
> |
Callback<{
value: object,
prevVal: object
}
> |
Callback<{
value: [number, number],
prevVal: [number, number],
keys: Array<string | number>
}
> |
Callback<{
value: number[],
prevVal: number[],
keys: Array<string | number>
}
> |
Callback<{
value: Single,
prevVal: Single
}
> |
Callback<{
value: Mult,
prevVal: Mult
}
> |
Callback<{
value: number,
prevVal: number
}
> |
Callback<{
value: number | false,
prevVal: number | false
}
> |
Callback<{
value: number | false | number[],
prevVal: number | false | number[]
}
> |
Callback<{
value: string | false,
prevVal: string | false
}
> |
Callback<{
value: "vertical" | "horizontal",
prevVal: "vertical" | "horizontal"
}
> |
Callback<{
value: ExtendList[],
prevVal: ExtendList[]
}
> |
Callback<{
value: number,
prevVal: number,
thumbIndex: number,
event: UIEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: 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"
>(
type: T,
arg: EventArgs[T]
): 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",
fullArgs: IArguments
): void

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,
index: number
): string

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.

No description.

No description.

orientation: "vertical" | "horizontal"

No description.

classList: Record<string, string[]>

No description.

No description.

No description.

data: object

No description.

No description.

No description.

No description.

initial: boolean

No description.

static StyleModule: any

No description.

static Style: Style

No description.

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,
endpoint: Base,
item: I,
outline: PropertiesOutline[I]
): any
defineInternalProperty<
I extends `_${string}` | unknown | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
target: WithCustom,
endpoint: WithCustom,
item: I
): any

No description.

invokeInternalPropertyChange<
I extends `_${string}` | unknown | unknown | "value" | "precision" | "step" | "structure" | "orientation" | "extend"
>(
item: I,
prevVal?: WithCustom[I]
): void

No description.

invokeInternalDeepPropertyChange<I extends keyof Deep>(
item: I,
prevVal: Deep[I],
deepKey?: string | number
): 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"
>(
type: T,
fn: EventMap[T],
customID?: string
): EventListenerID

No description.

removeEvent(): false | Array<Callback<{
value: any,
prevVal: any
}
> |
Callback<{
value: Record<string, string[]>,
prevVal: Record<string, string[]>
}
> |
Callback<{
value: Partial<EventList>,
prevVal: Partial<EventList>
}
> |
Callback<{
value: object,
prevVal: object
}
> |
Callback<{
value: [number, number],
prevVal: [number, number],
keys: Array<string | number>
}
> |
Callback<{
value: number[],
prevVal: number[],
keys: Array<string | number>
}
> |
Callback<{
value: Single,
prevVal: Single
}
> |
Callback<{
value: Mult,
prevVal: Mult
}
> |
Callback<{
value: number,
prevVal: number
}
> |
Callback<{
value: number | false,
prevVal: number | false
}
> |
Callback<{
value: number | false | number[],
prevVal: number | false | number[]
}
> |
Callback<{
value: string | false,
prevVal: string | false
}
> |
Callback<{
value: "vertical" | "horizontal",
prevVal: "vertical" | "horizontal"
}
> |
Callback<{
value: ExtendList[],
prevVal: ExtendList[]
}
> |
Callback<{
value: number,
prevVal: number,
thumbIndex: number,
event: UIEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: 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"
>(
type: T,
arg: EventArgs[T]
): 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",
fullArgs: IArguments
): void

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,
index: number
): string

No description.

static arrayToListString(arr: any[]): string

No description.

class Events extends Base

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.

No description.

No description.

orientation: "vertical" | "horizontal"

No description.

classList: Record<string, string[]>

No description.

No description.

No description.

data: object

No description.

No description.

No description.

No description.

initial: boolean

No description.

static StyleModule: any

No description.

static Style: Style

No description.

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"
>(
type: T,
fn: EventMap[T],
customID?: string
): EventListenerID

No description.

removeEvent(): false | Array<Callback<{
value: any,
prevVal: any
}
> |
Callback<{
value: Record<string, string[]>,
prevVal: Record<string, string[]>
}
> |
Callback<{
value: Partial<EventList>,
prevVal: Partial<EventList>
}
> |
Callback<{
value: object,
prevVal: object
}
> |
Callback<{
value: [number, number],
prevVal: [number, number],
keys: Array<string | number>
}
> |
Callback<{
value: number[],
prevVal: number[],
keys: Array<string | number>
}
> |
Callback<{
value: Single,
prevVal: Single
}
> |
Callback<{
value: Mult,
prevVal: Mult
}
> |
Callback<{
value: number,
prevVal: number
}
> |
Callback<{
value: number | false,
prevVal: number | false
}
> |
Callback<{
value: number | false | number[],
prevVal: number | false | number[]
}
> |
Callback<{
value: string | false,
prevVal: string | false
}
> |
Callback<{
value: "vertical" | "horizontal",
prevVal: "vertical" | "horizontal"
}
> |
Callback<{
value: ExtendList[],
prevVal: ExtendList[]
}
> |
Callback<{
value: number,
prevVal: number,
thumbIndex: number,
event: UIEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: number,
event: TouchEvent | MouseEvent
}
> |
Callback<{
thumbIndex: 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"
>(
type: T,
arg: EventArgs[T]
): 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",
fullArgs: IArguments
): void

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,
index: number
): string

No description.

static arrayToListString(arr: any[]): string

No description.

class Base extends SliderError

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.

No description.

No description.

orientation: "vertical" | "horizontal"

No description.

classList: Record<string, string[]>

No description.

No description.

No description.

data: object

No description.

No description.

No description.

No description.

initial: boolean

No description.

static StyleModule: any

No description.

static Style: Style

No description.

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",
fullArgs: IArguments
): void

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,
index: number
): string

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,
index: number
): string

No description.

static arrayToListString(arr: any[]): string

No description.

class DOMVariables extends DOMBuilder

DOMVariables(
slider: Slider89,
vals: Vals,
thumbEvents: Record<
string, EventListenerOrEventListenerObject
>
): DOMVariables

No description.

A basic thumb node used for cloning.

No description.

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.

No description.

thumbChildren: string[]

No description.

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.

Links specialVariables to potential slider properties they depend on, so that special variables get updated when the assigned property updates.

static regex: {
variable: RegExp,
attributes: RegExp,
tag: RegExp
} &
{
variableNoFlag: RegExp
}

No description.

createSliderNode(
thumbCount: number,
structureStr: string | false,
wrapper: HTMLElement
): Mult

No description.

addThumbToNodes(
nodes: Mult,
thumbIndex: number
): HTMLDivElement

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,
thumbIndex: number
): HTMLDivElement

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.

No description.

No description.

No description.

parseStructure(
structureStr: string,
slider: HTMLElement
): Partial<Single>

No description.

assembleElement<T extends string>(
node: Partial<Single>,
name: string,
nameStack: string[],
tag?: T,
content?: string,
attributes?: string
): T extends "div" ? HTMLDivElement : HTMLElement

No description.

No description.

static findNodeChildren(
node: Element,
collector: Element[] = []
): 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

DOMBuilder(
vals: Vals,
thumbEvents: Record<
string, EventListenerOrEventListenerObject
>
): DOMBuilder

No description.

A basic thumb node used for cloning.

No description.

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.

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.

Links specialVariables to potential slider properties they depend on, so that special variables get updated when the assigned property updates.

static regex: {
variable: RegExp,
attributes: RegExp,
tag: RegExp
} &
{
variableNoFlag: RegExp
}

No description.

createSliderNode(
thumbCount: number,
structureStr: string | false,
wrapper: HTMLElement
): Mult

No description.

addThumbToNodes(
nodes: Mult,
thumbIndex: number
): HTMLDivElement

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,
thumbIndex: number
): HTMLDivElement

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,
slider: HTMLElement
): Partial<Single>

No description.

assembleElement<T extends string>(
node: Partial<Single>,
name: string,
nameStack: string[],
tag?: T,
content?: string,
attributes?: string
): T extends "div" ? HTMLDivElement : HTMLElement

No description.

No description.

static findNodeChildren(
node: Element,
collector: Element[] = []
): 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

No description.

No description.

thumbChildren: string[]

No description.

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.

Links specialVariables to potential slider properties they depend on, so that special variables get updated when the assigned property updates.

static regex: {
variable: RegExp,
attributes: RegExp,
tag: RegExp
} &
{
variableNoFlag: RegExp
}

No description.

parseStructure(
structureStr: string,
slider: HTMLElement
): Partial<Single>

No description.

assembleElement<T extends string>(
node: Partial<Single>,
name: string,
nameStack: string[],
tag?: T,
content?: string,
attributes?: string
): T extends "div" ? HTMLDivElement : HTMLElement

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.

Style(spec: Record<string, StyleSpec>): Style

No description.

No description.

getNewStyleModule(wrapperClass: string): any

No description.

namespace PropertyNode

type KnownMult: {
[Name in keyof KnownSingle]: Array<KnownSingle[Name]>
}

No description.

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.

No description.

No description.

type WithFalseyMergable: {
[Prop in keyof Base]: Prop extends keyof Mergable
? Base[Prop] | false : Base[Prop]
}

No description.

Non-partial interface of all properties allowed in the configuration. Unlike in the final slider object, properties of Mergable may also assume false here.

See also Config

No description.

type Writable: Omit<Base, keyof Readonly>

No description.

interface Deep

range: [number, number]

No description.

values: number[]

No description.

interface Readonly

No description.

No description.

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.

classList: Record<string, string[]>

No description.

No description.

data: object

No description.

interface Vals implements WithCustom

range: [number, number]

No description.

values: number[]

No description.

No description.

No description.

classList: Record<string, string[]>

No description.

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.

No description.

readonly $: Base

No description.

No description.

No description.

namespace Operation

type Setter<I extends keyof Base>: (val: Type<I>) => void | boolean

No description.

type PostSetter<I extends keyof Base>: (val: Type<I>, prevVal: Type<I>) => void | boolean

No description.

type Getter<I extends keyof Base>: (val: Type<I>) => Type<I>

No description.

type KeySetter<I extends keyof Base>: I extends keyof Deep
? (val: Type<I>[number], key: number, prevValTop?: Type<I>) => void | boolean : never

No description.

type KeyGetter<I extends keyof Base>: I extends keyof Deep
? (val: Type<I>[number], key: number) => Type<I>[number] : never

No description.

namespace EventType

No description.

type Basic: eventTypes[number]

No description.

type Special: `change:${keyof WithCustom}`

No description.

No description.

interface DirectionRect

Contains strings that are useful for getting distance and dimension information, adapted to the slider's current orientation.

sizeC: "Width" | "Height"

No description.

size: "width" | "height"

No description.

start: "left" | "top"

No description.

end: "right" | "bottom"

No description.

variable ExtraCond

Variable does not seem to have an implementation. Please open an issue or pull request :)