Class: Slider

new Slider(parent, props)

Slider element. Additional callbacks can be added with the onChange method. This class focuses on the specific properties of the Slider component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:

Name	Type	Description
`parent`	HTMLElement	HTML element that is going to be the parent of the component
`props`	TComponents.SliderProps

Source: as-slider.js, line 58

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

Extends

TComponents.Component_A

Members

activeColor :string

Sets the color of active track of the Slider component.

Type:

string

Source: as-slider.js, line 639

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set max value.
slider.activeColor = 'red';

descrLabel :string

Sets the content of description label.

Type:

string

Source: as-slider.js, line 606

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set max value.
slider.descrLabel = 'hello world';

displayLabel :boolean

Sets the property to true to display the description lanel in the Slider component.

Type:

boolean

Source: as-slider.js, line 540

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set max value.
slider.displayLabel = 'hello world';

displayTicks :boolean

Sets to true to display step ticks in the Slider component.

Type:

boolean

Source: as-slider.js, line 705

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set max value.
slider.displayTicks = false;

displayValue :boolean

Sets the property to true to display the value lanel in the Slider component.

Type:

boolean

Source: as-slider.js, line 573

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set max value.
slider.displayValue = false;

inactiveColor :string

Sets the color of inactive track of the Slider component.

Type:

string

Source: as-slider.js, line 672

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set max value.
slider.inactiveColor = 'red';

max :number

Sets the maximum value of the slidr

Type:

number

Source: as-slider.js, line 455

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set max value.
slider.max = 100;

min :number

Sets the minimum value of the Slider component range.

Type:

number

Source: as-slider.js, line 497

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set max value.
slider.min = 10;

onPointerDown :function

Sets the pointer down event handler for the Slider component.

The handler can either be a string representing a function to be executed or a function itself.

If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the slider object.
If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.

Correct (Statements Only): xx.onPointerDown = "console.log('Action done.');"
Incorrect (Function Declaration): xx.onPointerDown = "function() { console.log('Action done.'); }"

Type:

function

Source: as-slider.js, line 368

Examples

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Example 1: Using a string as the handler:
slider.onPointerDown = "console.log('state changed', this.text);";

// Example 2: Using a arrow function as the handler:
// Note that the `this` context will not refer to the slider object
slider.onPointerDown = () => { console.log('state changed', slider.text); };

// Example 3: Using a common function as the handler:
slider.onPointerDown = async function() {
  console.log('state changed', this.text);
};

onPointerRelease :function

Sets the pointer release event handler for the Slider component. The handler can either be a string representing a function to be executed or a function itself.

If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the slider object.
If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.

Correct (Statements Only): xx.onPointerRelease = "console.log('Action done.');"
Incorrect (Function Declaration): xx.onPointerRelease = "function() { console.log('Action done.'); }"

Type:

function

Source: as-slider.js, line 327

Examples

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Example 1: Using a string as the handler:
slider.onPointerRelease = "console.log('state changed', this.text);";

// Example 2: Using a arrow function as the handler:
// Note that the `this` context will not refer to the slider object
slider.onPointerRelease = () => { console.log('state changed', slider.text); };

// Example 3: Using a common function as the handler:
slider.onPointerRelease = async function() {
  console.log('state changed', this.text);
};

value :number

Sets the value of the Slider component.

Type:

number

Source: as-slider.js, line 409

Example

const slider = new TComponents.Slider(document.body, {
  position: 'absolute',
  zIndex: 1000,
  max:200,
  min:50,
  value:100,
});

// Render the component.
slider.render();

// Set value.
slider.value = 20;

Methods

(protected) defaultProps() → {TComponents.SliderProps}

Returns the default values of class properties (excluding parent properties).

Overrides: TComponents.Component_A#defaultProps
Source: as-slider.js, line 93

Returns:

Type:: TComponents.SliderProps

markup() → {string}

Generates the markup for the Slider component.

Overrides: TComponents.Component_A#markup
Source: as-slider.js, line 257

Returns:

HTML markup string

Type:: string

onInit() → {void}

Initializes the Slider component.

Overrides: TComponents.Component_A#onInit
Source: as-slider.js, line 167

Returns:

Type:: void

onRender() → {void}

Renders the Slider component.

Overrides: TComponents.Component_A#onRender
Source: as-slider.js, line 175

Throws:

Throws an error if rendering fails.
Type Error

Returns:

Type:: void

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:

Name	Type	Description
`css`	string	The css string to be loaded into style tag

Source: as-slider.js, line 732

Returns:

Type:: void

Example

TComponents.Slider.loadCssClassFromString(`
.tc-slider {
  height: inherit;
 }`
);