ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix slider component (#14918)

Browse Source
This commit is contained in:
Charles Gagnon
2021-03-30 17:33:59 -07:00
committed by GitHub
parent f4e1f85e0f
commit 4df77c73bf
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/sql/base/browser/ui/slider/slider.ts
View File

@@ -60,6 +60,8 @@ export const DEFAULT_STEP = '1';
export class Slider extends Widget { export class Slider extends Widget {
private _el: HTMLInputElement; private _el: HTMLInputElement;
private _valueBox: HTMLInputElement;
private _datalist: HTMLDataListElement | undefined = undefined; private _datalist: HTMLDataListElement | undefined = undefined;
private _showTicks: boolean = false; private _showTicks: boolean = false;
@@ -82,6 +84,13 @@ export class Slider extends Widget {
this._el = document.createElement('input'); this._el = document.createElement('input');
this._el.type = 'range'; this._el.type = 'range';
this._valueBox = document.createElement('input');
this._valueBox.type = 'text';
this._valueBox.disabled = true;
this._valueBox.style.textAlign = 'center';
this._valueBox.style.width = '40px';
this.width = opts.width?.toString() || ''; this.width = opts.width?.toString() || '';
this.step = opts.step; this.step = opts.step;
this.min = opts.min; this.min = opts.min;
@@ -89,19 +98,14 @@ export class Slider extends Widget {
this.value = opts.value; this.value = opts.value;
this._showTicks = opts.showTicks; this._showTicks = opts.showTicks;
this._valueBox.value = this.value.toString();
this.updateTicksDisplay(); this.updateTicksDisplay();
const flexContainer = document.createElement('div'); const flexContainer = document.createElement('div');
flexContainer.style.display = 'flex'; flexContainer.style.display = 'flex';
flexContainer.style.flexFlow = 'row'; flexContainer.style.flexFlow = 'row';
const valueBox = document.createElement('input');
valueBox.type = 'text';
valueBox.disabled = true;
valueBox.value = this.value.toString();
valueBox.style.textAlign = 'center';
valueBox.style.width = '40px';
if (opts.ariaLabel) { if (opts.ariaLabel) {
this.ariaLabel = opts.ariaLabel; this.ariaLabel = opts.ariaLabel;
} }
@@ -111,7 +115,7 @@ export class Slider extends Widget {
}); });
this.oninput(this._el, () => { this.oninput(this._el, () => {
valueBox.value = this.value.toString(); this._valueBox.value = this.value.toString();
this._onInput.fire(this.value); this._onInput.fire(this.value);
}); });
@@ -125,7 +129,7 @@ export class Slider extends Widget {
this._register(this.onInput(opts.onInput)); this._register(this.onInput(opts.onInput));
} }
flexContainer.append(this._el, valueBox); flexContainer.append(this._el, this._valueBox);
this._container.appendChild(flexContainer); this._container.appendChild(flexContainer);
} }
@@ -177,6 +181,8 @@ export class Slider extends Widget {
public set value(val: number | undefined) { public set value(val: number | undefined) {
this._el.value = val?.toString() || this.min.toString(); this._el.value = val?.toString() || this.min.toString();
this._valueBox.value = this._el.value;
this._onChange.fire(this.value);
} }
public get value(): number { public get value(): number {