Display jQuery UI slider values

[pauldbabs]

I have set up a simple test project combining Animate(HTML5), Bootstrap and jQuery UI.

I want to update the text in a text box with the value taken from a jQuery UI slider.

WhenI display the slider value in the console, the value changes as expected.

However when I try and display the same value as text in the Animate text box, it only displays the initial value, when the slider is moved, the text is frozen on the initial value.

So I know the slider is working, but the Animate JS isn't updating the display.

I have also tried converting the slider value to a string before passing it to the text box symbol.

The animation loop code looks like this:

     var slider1Value = String($("#Slider1").slider("value"));

     console.log(slider1Value);

     this.Text_Inst.text = slider1Value;

Where this.Text_Inst is the instance name of the symbol.

I use requestAnimationFrame for the animation timer. I haven't put the details of this here.

[ClayUUID]

I'm not sure why you think converting a number to a string would have any effect on a textfield being updated. As you point out yourself, it displays the correct value once, so clearly the variable type isn't the problem.

If you need code to execute at regular intervals, there are two practical options, setInterval(), or adding an event listener to the global CreateJS ticker.

Given the display update function:

function showSliderVal() {

     this.Text_Inst.text = $("#Slider1").slider("value");

}

Using setInterval()

var sliderInt = setInterval(showSliderVal.bind(this), 100);

Stop with:

clearInterval(sliderInt);

Using Ticker

var sliderListener = createjs.Ticker.on("tick", showSliderVal, this);

Stop with:

createjs.Ticker.off("tick", sliderListener);

All of the above untested, but should work. Using setInterval() allows you to update the display at any arbitrary rate. Using the ticker will update the display every frame.

[pauldbabs]

There isn't a problem with the animationRequestFrame timer, it is working fine.

Upon further investigation, it appears that this.Text_inst.text is being updated but the display is not.

so

console.log(this.Text_inst.text)

displays the slider value in the console as it changes.

But the symbol instance itself isn't showing the changing values.

When I remove the jQuery line and insert a counter as a data source instead, this.Text_inst.text is updated correctly.

So basically there appears to be a conflict between jQuery UI slider and the symbol update.

It is possible that animationRequestFrame is conflicting with jQuery UI.

Or it is conflicting with CreateJS.

Tools being used are Dreamweaver and Flash/Animate.

In Dreamweaver I am using Bootstrap and jQuery UI, the Flash HTML5 component is pasted into a column of the Bootstrap layout, the jQuery UI elements are in a second Bootstrap column.

[pauldbabs]

I think I might know what the problem is...

It's been a long time since I used jQuery.

I forgot to use 'jQuery(document).ready...'

Before starting to use jQuery statements.

Hope that is all that is wrong, if not I'll be back!

[pauldbabs · Accepted solution]

Well things are improving...

Inserting $(document).ready into the code didn't help much.

However I can at least display something in a text box. I had forgotten to copy the following line from the Flash HTML5 doc to Dreamweaver:

createjs.Ticker.addEventListener("tick", stage);

So I think my timer was working but the createJS ticker wasn't running through the timeline frames correctly and updating the symbol.

Still have a jQuery error when I re-introduce the Slider code to update the text.

The error is: "can not call methods on slider prior to initialisation; attempted to call method 'value'"

If I use $(window).load()... instead of $(document).ready() It works, I don't get the error and the slider value is displayed in the box.
But $(window).load() has been deprecated and removed from later versions of jQuery.

[ClayUUID]

requestAnimationFrame is intended for doing high-performance animation effects. It can execute up to 60 times per second, which is really overkill for tracking the state of a slider.

Looking at the documention, it appears that the slider widget has a change event. So you should just listen for that instead of continuously polling the widget.

[pauldbabs]

ClayUUID. regarding requestAnimationFrame...

Well a project that just monitored a slider and did nothing else, would be pretty boring.

The problem is now reduced to a jQuery one.

The jQuery sliders are being accessed before they have finished initialising. Seems like a problem others have encountered. It's probably outside the context of this discussion.

[ClayUUID]

No matter what your project is doing, boring or non-boring, it shouldn't be wasting cycles manually polling UI widgets in its display loop. That's why event-driven programming exists.

[pauldbabs]

Thanks ClayUUID.

Ok. There are legitimate reasons why the slider might be monitored in 'real time'.

However, I have discovered there is a jQuery event called ".slide" that does this.

".change" event only occurs when you have finished dragging the slider (effectively a mouse up event).

BTW, given that it is now possible to emulate 1980s 8 bit computer hardware using JavaScript running in a modern browser (see JSBeeb), I'm not to worried about continuously monitoring a few sliders if the user experience is better because of it.