fix: ui color input attributes

This commit is contained in:
KernelDeimos 2024-07-01 14:23:41 -04:00
parent 75a989a7b6
commit d9c4fbbd1d

View File

@ -75,10 +75,6 @@ export default def(class Slider extends Component {
`; `;
create_template ({ template }) { create_template ({ template }) {
const min = this.get('min');
const max = this.get('max');
const value = this.get('value') ?? min;
const step = this.get('step') ?? 1;
const label = this.get('label') ?? this.get('name'); const label = this.get('label') ?? this.get('name');
$(template).html(/*html*/` $(template).html(/*html*/`
@ -87,17 +83,20 @@ export default def(class Slider extends Component {
<input class="slider-input" type="range"> <input class="slider-input" type="range">
</div> </div>
`); `);
// Set attributes here to prevent XSS injection
$(template).find('.slider-input').attr('min', min);
$(template).find('.slider-input').attr('max', max);
$(template).find('.slider-input').attr('value', value);
$(template).find('.slider-input').attr('step', step);
} }
on_ready ({ listen }) { on_ready ({ listen }) {
const input = this.dom_.querySelector('.slider-input'); const input = this.dom_.querySelector('.slider-input');
// Set attributes here to prevent XSS injection
{
const min = this.get('min');
input.setAttribute('min', min);
input.setAttribute('max', this.get('max'));
input.setAttribute('step', this.get('step') ?? 1);
input.value = this.get('value') ?? min;
}
input.addEventListener('input', e => { input.addEventListener('input', e => {
const on_change = this.get('on_change'); const on_change = this.get('on_change');
if (on_change) { if (on_change) {