File size: 2,230 Bytes
62b2fed 84b077e 62b2fed 84b077e 62b2fed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
export class RangeNumberWidget {
constructor({
widget_id = null,
label_text = null,
default_val = null,
min_val = null,
max_val = null,
step_val = null,
range_col = 8,
number_col = 4,
} = {}) {
this.widget_id = widget_id;
this.label_text = label_text;
this.default_val = default_val;
this.min_val = min_val;
this.max_val = max_val;
this.step_val = step_val;
this.range_col = range_col;
this.number_col = number_col;
}
spawn_in_parent(parent) {
this.create_widget();
this.bind_update_functions();
this.append_to_parent(parent);
}
remove() {
this.widget.remove();
}
create_widget() {
this.widget_html = `
<label class="col-form-label">${this.label_text}</label>
<div class="col-sm-${this.range_col} d-flex align-items-center">
<input id="${this.widget_id}-range"
type="range" value="${this.default_val}"
min="${this.min_val}" max="${this.max_val}" step="${this.step_val}"
class="form-range"
/>
</div>
<div class="col-sm-${this.number_col}">
<input id="${this.widget_id}-number"
type="number" value="${this.default_val}"
min="${this.min_val}" max="${this.max_val}" step="${this.step_val}"
class="form-control"
/>
</div>`;
this.widget = $(this.widget_html);
}
update_number_widget_value(value) {
$(`#${this.widget_id}-number`).val(value);
}
update_range_widget_value(value) {
$(`#${this.widget_id}-range`).val(value);
}
bind_update_functions() {
let self = this;
this.widget.find(`#${this.widget_id}-range`).on("input", function () {
self.update_number_widget_value($(this).val());
});
this.widget.find(`#${this.widget_id}-number`).on("input", function () {
self.update_range_widget_value($(this).val());
});
}
append_to_parent(parent) {
parent.append(this.widget);
}
}
|