@scania/tegel
Version:
Tegel Design System
957 lines (956 loc) • 39.1 kB
JavaScript
import { h, } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
export class TdsSlider {
constructor() {
/** Text for label */
this.label = '';
/** Initial value */
this.value = '0';
/** Minimum value */
this.min = '0';
/** Maximum value */
this.max = '100';
/** Number of tick markers (tick for min- and max-value will be added automatically) */
this.ticks = '0';
/** Decide to show numbers above the tick markers or not */
this.showTickNumbers = false;
/** Decide to show the tooltip or not */
this.tooltip = false;
/** Sets the disabled state for the whole component */
this.disabled = false;
/** Sets the read only state for the whole component */
this.readOnly = false;
/** Decide to show the controls or not */
this.controls = false;
/** Decide to show the input field or not */
this.input = false;
/** Defines how much to increment/decrement the value when using controls */
this.step = '1';
/** Name property (will be inherited by the native slider component) */
this.name = '';
/** Sets the size of the thumb */
this.thumbSize = 'lg';
/** Snap to the tick's grid */
this.snap = false;
/** Sets the aria-label for the slider control. */
this.tdsAriaLabel = '';
/** ID for the Slider's input element, randomly generated if not specified. */
this.sliderId = generateUniqueId();
/** Sets the read only aria label for the input field */
this.tdsReadOnlyAriaLabel = '';
this.wrapperElement = null;
this.thumbElement = null;
this.thumbInnerElement = null;
this.trackElement = null;
this.trackFillElement = null;
this.thumbGrabbed = false;
this.thumbLeft = 0;
this.tickValues = [];
this.useControls = false;
this.useInput = false;
this.useSmall = false;
this.useSnapping = false;
this.supposedValueSlot = -1;
this.resizeObserverAdded = false;
this.initialValue = '0';
this.resetEventListenerAdded = false;
this.formElement = null;
this.ariaLiveElement = null;
this.resetToInitialValue = () => {
this.forceValueUpdate(this.initialValue);
this.reset();
};
}
roundToStep(val) {
const stepNum = parseFloat(this.step);
if (!stepNum) {
return parseFloat(val.toFixed());
}
const rounded = Math.round(val / stepNum) * stepNum;
const precision = (stepNum.toString().split('.')[1] || '').length;
return parseFloat(rounded.toFixed(precision));
}
/** Public method to re-initialise the slider if some configuration props are changed */
async reset() {
this.componentWillLoad();
this.componentDidLoad();
}
handleKeydown(event) {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowDown':
case '-':
this.stepLeft(event);
this.announceValueChange();
break;
case 'ArrowRight':
case 'ArrowUp':
case '+':
this.stepRight(event);
this.announceValueChange();
break;
case 'Home':
this.setToMinValue();
this.announceValueChange();
break;
case 'End':
this.setToMaxValue();
this.announceValueChange();
break;
default:
break;
}
}
handleRelease(event) {
var _a, _b, _c;
if (!this.thumbGrabbed) {
const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
if (clickedOnTrack) {
this.thumbCore(event);
(_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.focus();
}
return;
}
this.thumbGrabbed = false;
(_b = this.thumbInnerElement) === null || _b === void 0 ? void 0 : _b.classList.remove('pressed');
if (this.thumbElement) {
this.thumbElement.setAttribute('aria-grabbed', 'false');
}
this.updateValue(event);
(_c = this.trackElement) === null || _c === void 0 ? void 0 : _c.focus();
}
handleMove(event) {
if (!this.thumbGrabbed) {
return;
}
this.thumbCore(event);
}
handleValueUpdate(newValue) {
this.calculateThumbLeftFromValue(newValue);
this.value = newValue;
this.updateTrack();
}
setToMinValue() {
if (this.readOnly || this.disabled) {
return;
}
this.forceValueUpdate(this.min);
}
setToMaxValue() {
if (this.readOnly || this.disabled) {
return;
}
this.forceValueUpdate(this.max);
}
updateSupposedValueSlot(localLeft) {
const numTicks = parseInt(this.ticks);
const trackWidth = this.getTrackWidth();
const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
const snappedLocalLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
let thumbPositionPX = 0;
if (snappedLocalLeft >= 0 && snappedLocalLeft <= trackWidth) {
thumbPositionPX = snappedLocalLeft;
}
else if (snappedLocalLeft > trackWidth) {
thumbPositionPX = trackWidth;
}
else if (snappedLocalLeft < 0) {
thumbPositionPX = 0;
}
this.supposedValueSlot = Math.round(thumbPositionPX / distanceBetweenTicks);
return snappedLocalLeft;
}
thumbCore(event) {
var _a;
const numTicks = parseInt(this.ticks);
const trackRect = (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
if (!trackRect)
return;
let localLeft = 0;
if (event.type === 'mousemove' || event.type === 'mouseup') {
localLeft = event.clientX - trackRect.left;
}
else if (event.type === 'touchmove') {
localLeft = event.touches[0].clientX - trackRect.left;
}
else
console.warn('Slider component: Unsupported event!');
this.supposedValueSlot = -1;
if (this.useSnapping && numTicks > 0) {
localLeft = this.updateSupposedValueSlot(localLeft);
}
this.thumbLeft = this.constrainThumb(localLeft);
if (this.thumbElement) {
this.thumbElement.style.left = `${this.thumbLeft}px`;
}
this.updateValue(event);
}
updateTrack() {
const trackWidth = this.getTrackWidth();
const percentageFilled = (this.thumbLeft / trackWidth) * 100;
if (this.trackFillElement) {
this.trackFillElement.style.width = `${percentageFilled}%`;
}
}
announceValueChange() {
if (!this.ariaLiveElement)
return;
// Debounce announcements to prevent too many rapid announcements
clearTimeout(this.announcementDebounceTimeout);
this.announcementDebounceTimeout = setTimeout(() => {
if (!this.ariaLiveElement)
return;
this.ariaLiveElement.textContent = `${this.label ? this.label + ' ' : ''}${this.value} of ${this.max}`;
}, 50);
}
updateValue(event) {
const trackWidth = this.getTrackWidth();
const min = parseFloat(this.min);
const max = parseFloat(this.max);
// If snapping is enabled and a valid supposedValueSlot is available,
// snap the value to the closest tick. Use the snapped value to update
// the slider's thumb position and internal value.
if (this.useSnapping && this.supposedValueSlot >= 0) {
const snappedValue = this.tickValues[this.supposedValueSlot];
this.value = snappedValue.toString();
this.calculateThumbLeftFromValue(snappedValue);
}
else {
const percentage = this.thumbLeft / trackWidth;
const calculatedValue = min + percentage * (max - min);
this.value = this.roundToStep(calculatedValue).toString();
}
this.updateTrack();
// Update ARIA attributes
if (this.thumbElement) {
this.thumbElement.setAttribute('aria-valuenow', this.value);
this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
}
this.tdsInput.emit({ value: this.value });
/* Emit event after user has finished dragging the thumb */
if (event.type === 'touchend' || event.type === 'mouseup') {
this.tdsChange.emit({ value: this.value });
this.announceValueChange();
}
}
forceValueUpdate(newValue) {
this.calculateThumbLeftFromValue(newValue);
this.value = newValue;
// Update ARIA attributes
if (this.thumbElement) {
this.thumbElement.setAttribute('aria-valuenow', this.value);
this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
}
this.tdsChange.emit({ value: this.value });
this.updateTrack();
this.announceValueChange();
}
constrainThumb(x) {
const width = this.getTrackWidth();
if (x < 0) {
return 0;
}
if (x > width) {
return width;
}
return x;
}
getTrackWidth() {
if (!this.trackElement) {
return 0;
}
const trackRect = this.trackElement.getBoundingClientRect();
return trackRect.right - trackRect.left;
}
calculateThumbLeftFromValue(value) {
const initValue = value;
const trackWidth = this.getTrackWidth();
const normalizedValue = initValue - parseFloat(this.min);
const normalizedMax = parseFloat(this.max) - parseFloat(this.min);
const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;
this.thumbLeft = calculatedLeft;
this.updateSupposedValueSlot(this.thumbLeft);
if (this.thumbElement) {
this.thumbElement.style.left = `${this.thumbLeft}px`;
this.thumbElement.setAttribute('aria-valuenow', this.value);
}
}
/** Updates the slider value based on the current input value */
updateSliderValueOnInputChange(event) {
const inputElement = event.target;
let newValue = parseFloat(inputElement.value);
// Check if the new value is different from the current value
if (newValue === parseFloat(this.value)) {
return; // Exit the function if the new value is the same as the current value
}
const minNum = parseFloat(this.min);
const maxNum = parseFloat(this.max);
if (newValue < minNum) {
newValue = minNum;
}
else if (newValue > maxNum) {
newValue = maxNum;
}
const rounded = this.roundToStep(newValue);
this.forceValueUpdate(rounded.toString());
}
/** Updates the slider value when using tds-text-field (reads value from host element) */
updateSliderValueFromTextField(event) {
const hostEl = event.target; // tds-text-field host element exposes a value prop
const raw = hostEl && typeof hostEl.value !== 'undefined' ? hostEl.value : '';
let newValue = parseFloat(raw);
if (Number.isNaN(newValue)) {
return;
}
const minNum = parseFloat(this.min);
const maxNum = parseFloat(this.max);
if (newValue < minNum) {
newValue = minNum;
}
else if (newValue > maxNum) {
newValue = maxNum;
}
const rounded = this.roundToStep(newValue);
this.forceValueUpdate(rounded.toString());
}
/** Updates the slider value based on the current input value when enter is pressed */
handleInputFieldEnterPress(event) {
event.stopPropagation();
if (event.key === 'Enter') {
this.updateSliderValueOnInputChange(event);
const inputElement = event.target;
inputElement.blur();
}
}
grabThumb() {
var _a;
if (this.readOnly) {
return;
}
this.thumbGrabbed = true;
(_a = this.thumbInnerElement) === null || _a === void 0 ? void 0 : _a.classList.add('pressed');
if (this.thumbElement) {
this.thumbElement.setAttribute('aria-grabbed', 'true');
}
}
calculateInputSizeFromMax() {
const input = this.host.querySelector('tds-text-field input[type="number"]');
if (input) {
if (this.readOnly) {
// explicit size to fit suffix icon
input.style.width = `${52 + this.max.length * 8}px`;
}
else {
input.setAttribute('size', `${this.max.length}`);
}
}
}
controlsStep(delta, event) {
if (this.readOnly || this.disabled) {
return;
}
const numTicks = parseInt(this.ticks);
/* if snapping is enabled, instead just increment or decrement the current "fixed" value from our ticknumber array */
if (this.useSnapping && numTicks > 0) {
const stepDir = delta > 0 ? 1 : -1;
this.supposedValueSlot += stepDir;
if (this.supposedValueSlot < 0) {
this.supposedValueSlot = 0;
}
else if (this.supposedValueSlot > numTicks + 1) {
this.supposedValueSlot = numTicks + 1;
}
this.updateValue(event);
}
else {
const trackWidth = this.getTrackWidth();
const percentage = this.thumbLeft / trackWidth;
let currentValue = parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min));
currentValue += delta;
currentValue = this.roundToStep(currentValue);
if (currentValue < parseFloat(this.min)) {
currentValue = parseFloat(this.min);
}
else if (currentValue > parseFloat(this.max)) {
currentValue = parseFloat(this.max);
}
this.value = `${currentValue}`;
this.forceValueUpdate(this.value);
}
}
stepLeft(event) {
this.controlsStep(-parseFloat(this.step), event);
}
stepRight(event) {
this.controlsStep(parseFloat(this.step), event);
}
componentWillLoad() {
const numTicks = parseInt(this.ticks);
if (numTicks > 0) {
this.tickValues = [parseFloat(this.min)];
const interval = (parseFloat(this.max) - parseFloat(this.min)) / (numTicks + 1);
const precision = (parseFloat(this.step).toString().split('.')[1] || '').length;
for (let i = 1; i <= numTicks; i++) {
const raw = parseFloat(this.min) + interval * i;
this.tickValues.push(parseFloat(raw.toFixed(precision)));
}
this.tickValues.push(parseFloat(this.max));
}
this.useInput = false;
this.useControls = false;
if (this.controls) {
this.useControls = true;
}
else if (this.input) {
this.useInput = true;
}
this.useSmall = this.thumbSize === 'sm';
this.useSnapping = this.snap;
const min = parseFloat(this.min);
const max = parseFloat(this.max);
if (min > max) {
console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
this.disabled = true;
}
}
componentDidLoad() {
this.calculateInputSizeFromMax();
if (!this.resizeObserverAdded) {
this.resizeObserverAdded = true;
const resizeObserver = new ResizeObserver(() => {
this.calculateThumbLeftFromValue(this.value);
this.updateTrack();
});
if (this.wrapperElement)
resizeObserver.observe(this.wrapperElement);
}
this.calculateThumbLeftFromValue(this.value);
this.updateTrack();
// Only set the initial value once:
if (!this.initialValue) {
this.initialValue = this.value;
}
// Set initial aria attributes
if (this.thumbElement) {
this.thumbElement.setAttribute('aria-valuenow', this.value);
this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
// Ensure the thumb can receive focus via keyboard
this.thumbElement.tabIndex = this.disabled ? -1 : 0;
}
}
componentDidRender() {
// Only add the event listener once:
if (!this.resetEventListenerAdded) {
this.formElement = this.host.closest('form');
if (this.formElement) {
this.formElement.addEventListener('reset', this.resetToInitialValue);
this.resetEventListenerAdded = true;
}
}
}
connectedCallback() {
if (this.readOnly && !this.tdsReadOnlyAriaLabel) {
console.warn('tds-slider: tdsAriaLabel is reccomended when readonly is true');
}
if (this.resetEventListenerAdded && this.formElement) {
this.formElement.removeEventListener('reset', this.resetToInitialValue);
this.resetEventListenerAdded = false;
}
}
render() {
const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
return (h("div", { key: 'b292fb88725097524b908a920eec96c87a242685', class: {
'tds-slider-wrapper': true,
'read-only': this.readOnly,
} }, h("input", { key: '93df885ffdb69b5b9261877f3489f4e0a27de114', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '730c20f6adf2cb8b00222ece8c553240fca9fc6a', class: "sr-only", "aria-live": "assertive", ref: (el) => {
this.ariaLiveElement = el;
} }), h("div", { key: '0d7a1a204e4893cb451e00976825ed69b297d36f', class: {
'tds-slider': true,
'disabled': this.disabled,
'tds-slider-small': this.useSmall,
}, ref: (el) => {
this.wrapperElement = el;
}, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '8e02adb2e59e5425b8a2695e04d1de0c0db22808', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '3e1c8b9d0403536479a68c40dd30bae04203fb23', class: "tds-slider__input-values" }, h("div", { key: '9fc1090387cfeb4d4e7b6bad0676df1b49057ede', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '996317c2a48374311a2b654994dc99d5d62555dd', class: "tds-slider__controls" }, h("div", { key: '07aeeabdcd75d6238ac7ee458aee91ca951bc748', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'e42b57eb0db364ad919398201fffe34fb167eb2f', name: "minus", size: "16px" })))), h("div", { key: '6ece66a7e5b6058cc2c9991b3625c2ae7f474fa7', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'ceb9140f2bf24827913ae5adfc911827f6e487d1', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'd0b6cb025543e7de8d68d86b9d3b7ac91ec4782a', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '40355beb56539ade6aadc6b75aa8a5444ddeb512', class: "tds-slider__track", ref: (el) => {
this.trackElement = el;
}, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
if (this.thumbElement) {
this.thumbElement.focus();
}
} }, h("div", { key: '91f7514a2f8533a91b90af108fe5a7559019c387', class: "tds-slider__track-fill", ref: (el) => {
this.trackFillElement = el;
} }), h("div", { key: 'e25e3f91631040ce0b2aea1ae5007a9b989f239c', class: "tds-slider__thumb", ref: (el) => {
this.thumbElement = el;
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'f21169a0dc0df70287c680e3f5ba32c4ae8e263f', class: "tds-slider__value" }, this.value, h("svg", { key: '1cf441da18bfc2d8b55a009073dea7ef948ddcad', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '050ac1177f3b4526f94a1ff4418b746c56463009', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '8817050cc1ead7468139f7d166b61ca3d977c578', class: "tds-slider__thumb-inner", ref: (el) => {
this.thumbInnerElement = el;
} })))), this.useInput && (h("div", { key: 'b3132b32773468761ead8f3f3e035df8b51fe319', class: "tds-slider__input-values" }, h("div", { key: 'faa0e4b8e5c60430d90902bb97c80e621407cca5', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '05f9d258e85202769af4cc8c1a665bb08af9d8bd', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: 'cb5eda3e508e4bae438e1e282543fc20e2ff4b84', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: '0e0f1d2d1ee7630b9b802291395581add2324b7d', class: "tds-slider__controls" }, h("div", { key: 'b9675d90ec44b9a2b0b9880b19c1abd5d02ad98e', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '6af836d67b5fdf5c5c7c2c5de68acb6781d4e020', name: "plus", size: "16px" })))))));
}
static get is() { return "tds-slider"; }
static get originalStyleUrls() {
return {
"$": ["slider.scss"]
};
}
static get styleUrls() {
return {
"$": ["slider.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Text for label"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label",
"defaultValue": "''"
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Initial value"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value",
"defaultValue": "'0'"
},
"min": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Minimum value"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "min",
"defaultValue": "'0'"
},
"max": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Maximum value"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "max",
"defaultValue": "'100'"
},
"ticks": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of tick markers (tick for min- and max-value will be added automatically)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "ticks",
"defaultValue": "'0'"
},
"showTickNumbers": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decide to show numbers above the tick markers or not"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "show-tick-numbers",
"defaultValue": "false"
},
"tooltip": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decide to show the tooltip or not"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tooltip",
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the disabled state for the whole component"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"readOnly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the read only state for the whole component"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "read-only",
"defaultValue": "false"
},
"controls": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decide to show the controls or not"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "controls",
"defaultValue": "false"
},
"input": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decide to show the input field or not"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "input",
"defaultValue": "false"
},
"step": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines how much to increment/decrement the value when using controls"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "step",
"defaultValue": "'1'"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name property (will be inherited by the native slider component)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name",
"defaultValue": "''"
},
"thumbSize": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'sm' | 'lg'",
"resolved": "\"lg\" | \"sm\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the size of the thumb"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "thumb-size",
"defaultValue": "'lg'"
},
"snap": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Snap to the tick's grid"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "snap",
"defaultValue": "false"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the aria-label for the slider control."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-label",
"defaultValue": "''"
},
"sliderId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID for the Slider's input element, randomly generated if not specified."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "slider-id",
"defaultValue": "generateUniqueId()"
},
"tdsReadOnlyAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the read only aria label for the input field"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-read-only-aria-label",
"defaultValue": "''"
}
};
}
static get events() {
return [{
"method": "tdsChange",
"name": "tdsChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends the value of the slider when changed. Fires after mouse up and touch end events."
},
"complexType": {
"original": "{\n value: string;\n }",
"resolved": "{ value: string; }",
"references": {}
}
}, {
"method": "tdsInput",
"name": "tdsInput",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends the value of the slider while moving the thumb. Fires on mouse move and touch move events."
},
"complexType": {
"original": "{\n value: string;\n }",
"resolved": "{ value: string; }",
"references": {}
}
}];
}
static get methods() {
return {
"reset": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Public method to re-initialise the slider if some configuration props are changed",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "handleValueUpdate"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeydown",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "mouseup",
"method": "handleRelease",
"target": "window",
"capture": false,
"passive": true
}, {
"name": "touchend",
"method": "handleRelease",
"target": "window",
"capture": false,
"passive": true
}, {
"name": "mousemove",
"method": "handleMove",
"target": "window",
"capture": false,
"passive": true
}, {
"name": "touchmove",
"method": "handleMove",
"target": "window",
"capture": false,
"passive": true
}];
}
}