Создайте ползунок диапазона с помощью Stencil

Я хочу создать ползунок диапазона с помощью трафарета.

Над ползунком диапазона находится h1, который должен возвращать правильное значение ползунка.

Я использую Listen-Event, который прослушивает, если был нажат range-slider (я также пробовал изменить, но это не сработало). Если щелкнуть, выполняется handleChangeEvent. В этом методе у меня есть переменная meinSlider, которая ранее была назначена input type="range". В этой переменной я использую addEventListener, который слушает «изменение», а затем я использую document.querySelector и выбираю свой элемент span, который должен дать правильный номер и присвоить его значению ползунка диапазона:

document.querySelector(".regler-wertung span").innerHTML = this.value;

Однако это не работает, и если я использую console.log, он возвращает null. Похоже, я не могу получить доступ к HTML-элементу.

Кроме того, у меня есть ошибка:

TypeError: Не удается прочитать свойство addEventListener со значением null в regler.changeEvent, в regler.handleChangeEvent, в HTMLElement.listenMeta.eventDisabled.plt.domApi.$addEventListener.ev

Я совсем не профессионал и не имею опыта работы со Stencil.

Я очень благодарен за любую помощь.

Не уверен, имеет ли это значение, но я также использую Электрон, потому что это настольное приложение.

Вот мой .tsx:

import { Component, Prop, Listen, } from '@stencil/core';

@Component({
    tag: 'regler-wertung',
    styleUrl: 'regler.css',
    shadow: false
})
export class regler {
    @Prop() regler: string;
    @Prop() value: number;

    meinSlider=document.querySelector('#myRange')

    @Listen ('click', {capture: true})
    handleChangeEvent(){
      this.meinSlider.addEventListener("change", function(){ 
        document.querySelector(".regler-wertung span").innerHTML = this.value; 
        })
      }
    render() {
     return (
        <div>
            <h1 class="regler-wertung">gewichtete Punkte von 0-10: {this.regler} <span>0</span></h1>
            <input type="range" id="myRange" class="slider" value="0" min="0" max="10" ></input>
        </div>
          )
        }
}

typescript slider stenciljs range stencil-component
person JessiNö    schedule 23.04.2020    source источник
comment
stackoverflow.com/questions/61368457   -  person Simon Hänisch    schedule 23.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вот решение.

import { Component, Prop, Listen, h } from '@stencil/core';

@Component({
    tag: 'regler-wertung',
    styleUrl: 'regler.css',
    shadow: false
})
export class regler {
    @Prop() regler: string = "defaultRegler";
    @Prop() value: number = 50;

    meinSlider!: HTMLInputElement; // Added for this error Cannot read property 'addEventListener'

    @Listen('click', { capture: true })
    handleChangeEvent() {
        this.meinSlider.addEventListener("change", function () {
            // not required now
            // document.querySelector(".regler-wertung span").innerHTML = this.value;
        })
    }

    updateValue(event: Event) {
        this.value = parseInt((event.target as HTMLInputElement).value);
    }

    render() {
        return (
            <div>
                <h1 class="regler-wertung">gewichtete Punkte von 0-10: {this.regler} <span>{this.value}</span></h1>
                <input type="range" id="myRange" class="slider" value="0" min="0" max="10" onChange={this.updateValue} ref={ele => this.meinSlider = ele as HTMLInputElement}></input>
            </div>
        )
    }
}

Для обновления значения: я добавил метод updateValue (вызываемый при событии onChange), в котором я обновляю свойство.

Для addEventListener нулевой ошибки: я обновил meinSlider, также добавил обновление этой переменной во входном теге, посмотрите.

person Abhishek Kumar    schedule 03.08.2020