Build range-slider using Stencil

Question

I want to build a range-slider using stencil.

Above the range slider is an h1 which should give back the correct value of the slider.

I use a Listen-Event, which listens if the range-slider was clicked (I also tried change, but that didn't work). If it is clicked, handleChangeEvent is executed. In this method I have my variable meinSlider which is previously assigned to input type="range". On this variable, I use addEventListener, which listens for "change" and then I use document.querySelector and select my span element, which should give the correct number and assign it to the value of the range-slider:

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

However, it doesn't work and if I use a console.log it gives back null. I guess I can't access the HTML-Element.

Besides, I have an Error:

TypeError: Cannot read property 'addEventListener' of null at regler.changeEvent, at regler.handleChangeEvent, at HTMLElement.listenMeta.eventDisabled.plt.domApi.$addEventListener.ev

I'm anything else but a pro and don't have any experience with Stencil.

I'm very thankful for any help.

Not sure, if this matters, but I'm also using Electron, because it's a Desktop-App.

Heres my .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>
          )
        }
}

https://stackoverflow.com/questions/61368457/ – Simon Hänisch Apr 23 '20 at 15:27 — Simon Hänisch, Apr 23 '20 at 15:27

Abhishek Kumar · Answer 1 · 2020-08-03T10:37:11.940

Here is the solution.

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>
        )
    }
}

For updating the value: I have added updateValue method (called on onChange event) where I am updating the prop.

For addEventListener of null error: I have updated meinSlider also added updating this variable in input tag have a look.

Build range-slider using Stencil

1 Answers1