43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
import { BaseItem } from './base-item';
|
|
export class SliderItem extends BaseItem {
|
|
constructor(id, title, min, max, step, defaultValue = null) {
|
|
super(id, title);
|
|
this.min = min;
|
|
this.max = max;
|
|
this.step = step;
|
|
this.defaultValue = defaultValue;
|
|
}
|
|
getDOMNode() {
|
|
this.container = document.createElement('div');
|
|
this.label = document.createElement('label');
|
|
this.label.textContent = this.title;
|
|
this.label.setAttribute('for', `slider_${this.id}`);
|
|
this.slider = document.createElement('input');
|
|
this.slider.id = `slider_${this.id}`;
|
|
this.slider.type = 'range';
|
|
this.slider.setAttribute('min', this.min.toString());
|
|
this.slider.setAttribute('max', this.max.toString());
|
|
this.slider.setAttribute('step', this.step.toString());
|
|
if (this.defaultValue)
|
|
this.slider.value = this.defaultValue.toString();
|
|
this.slider.addEventListener('change', this.onChange.bind(this));
|
|
this.slider.addEventListener('focus', this.onFocus.bind(this));
|
|
this.container.appendChild(this.label);
|
|
this.container.appendChild(this.slider);
|
|
this.container.addEventListener('focus', this.onFocus.bind(this));
|
|
return this.container;
|
|
}
|
|
getContents() {
|
|
return this.slider.value;
|
|
}
|
|
onChange(event) {
|
|
this.emit('update', {
|
|
type: 'slider',
|
|
value: this.slider.value
|
|
});
|
|
}
|
|
focus() {
|
|
this.slider && this.slider.focus();
|
|
}
|
|
}
|