Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now! Learn more

Reply
az2451
Resolver I
Resolver I

Create custom slider for a custom visual plot

Hi guys,

 

i want to build a slider similar like in this picture here

 

Before i design the slider, i just want to read values dynamically from a simple textbox. I managed that without problems by creating a DOM-Element (input) with js

 

But as i try changing the value, it just stays static (it still returns the value 800) 😞

 

Does anyone have i idea how to read the values from an textbox when i change the value on it?

 

 

		private createHelpLinkElement3(): Element {
            let linkElement = document.createElement("input");
			linkElement.setAttribute("value", "800");
            linkElement.setAttribute("class", "helpLink3");
            return linkElement;
        };

 

 

Here you can download my project

 

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

Hi @az2451

 

We'd recommend to bind a keypress event to catch each change:

this.helpLinkElement3.addEventListener("keypress", (event) => {
    this.getx = parseInt((event.target as HTMLInputElement).value);

    console.log(this.getx);
});

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

2 REPLIES 2
v-viig
Community Champion
Community Champion

Hi @az2451

 

We'd recommend to bind a keypress event to catch each change:

this.helpLinkElement3.addEventListener("keypress", (event) => {
    this.getx = parseInt((event.target as HTMLInputElement).value);

    console.log(this.getx);
});

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

You are so amazing 🙂 

 

Thank you!

Helpful resources

Announcements
Power BI DataViz World Championships

Power BI Dataviz World Championships

The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now!

December 2025 Power BI Update Carousel

Power BI Monthly Update - December 2025

Check out the December 2025 Power BI Holiday Recap!

FabCon Atlanta 2026 carousel

FabCon Atlanta 2026

Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.