Slider with dynamic ticks and labels

[campopianoa]

Hmm, I just realized that when I put more than one of my slider component on the screen at once, I run into the problem of not being able to distinguish between components in JS.

I believe I’ve been down this road before according to these posts:

Select specific component with javascript

So I spent quite a lot of time working on how to do this with the popover and hover/focus behaviour dependencies… This was my methodology and how I came about it: call the js function from the init method of a Form or from a button click or wherever makes sense… use the component as an argument if we then take a look at the component with console.log(component) we can start to dive into its attributes and methods using chrome dev tools. the path of the html element is: component.v._…

Thanks again to @stucork, I was able to pass the components themselves to JS and select them using some methods that are still quite mysterious to me.

For example (and you can see this in the above JS too),
I wanted to use:

var range = document.getElementById("range")

But that selected both slider (i.e., range) components on the screen, so I used the following techniques from the linked post above (I admit that I don’t fully understand how this works):

// select the anvil component that is passed to JS
var range = comp.v._anvil.element[0]
.
.
.
// get the inner "ticks" div 
var ticks = $(range).find("div").find("div");
.
.
.
ticks[0].appendChild(span)

I just want to point this out in case I’m doing something horribly wrong. Some of it is not pretty but somehow it all works.