Построить диапазон-слайдер, используя трафарет - PullRequest
Новая
       90

Построить диапазон-слайдер, используя трафарет

0 голосов
/ 23 апреля 2020

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

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

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

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

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

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

Ошибка типа: Невозможно прочитать свойство 'addEventListener' со значением null в regler.changeEvent, в regler.handleChangeEvent, в HTMLElement.listenMeta.eventDisabled.plt.domApi. $ addEventListener.ev

Я все остальное, но не профессионал и у меня нет опыта работы со Stencil.

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

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

Вот мой .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>
          )
        }
}
...