1 Correct answer
UPDATE: 11/01/2021
Please see two new approaches that are more versatile, extensible, and modular in the following answer:
https://community.adobe.com/t5/animate-discussions/html5-range-slider/m-p/12489403#M348638
__________________________________________________________________________
Hi.
I do appreciate your feedback.
I have to apologize again! I tend to code this answers here very fast and sometimes I forget small details. This time I forgot to consider the stage.scaleX when setting the
...
23
Replies
I tried following the advice found here Slider to control timeline
But the slider seemed buggy and the button (handle) was not close enough to the highlight. I am wondering if this is really the best approach. Or what I can do to make it work.
After altering it a bit this is what I have currently in my actions
this.button.x = 100;
this.button.on("pressmove", function(e)
{
e.target.x = this.clamp(e.stageX, this.bar.x, this.bar.x + this.bar.nominalBounds.width);
this.setProportion();
}.bind(this));
this.setProportion = function()
{
var prop = (this.button.x - this.bar.x) / this.bar.nominalBounds.width;
this.button.x = this.button.x - Math.round(prop * 42) - 75;
// this.txt.x = this.button.x;
this.txt.text = Math.round(prop * 42);
this.bar.gotoAndStop(Math.floor(this.bar.timeline.duration * prop));
}.bind(this);
this.clamp = function(value, min, max)
{
if (value < min)
return min;
else if (value > max)
return max;
else
return value;
}
setTimeout(this.setProportion, 0);
Good afternoon,
I have reviewed your code and it looks like there is an issue in the way the code is calculating the position of the button on the X axis and how it relates to the yellow colored fill. Currently when the button is clicked there is a jump on the X location which looks to be set by your min value within the if/if else section of the code.
When I did some error detection it looks that the min value is being set via this.bar.x and thus sits at 147.3. This is then returned as the min value which forces the button to leap frog roughly half the length of the horizontal bar. The yellow fill does not follow the button but instead fills left of 0 value. Please see my notes in bold.
this.button.on("pressmove", function(e)
{
e.target.x = this.clamp(e.stageX / stage.scaleX, this.bar.x (this looks to be setting the value of 147.3), this.bar.x + this.bar.nominalBounds.width(this value is being set to 255));
this.setProportion(e.target.x);
}.bind(this));
this.setProportion = function(posX)
{
this.bar.highlight.scaleX = (this.button.x - this.bar.x) / this.bar.nominalBounds.width;
//console.log(this.bar.x);
this.txt.text = Math.round(this.button.x / 9); (This was being used as a test for keeping the slider and number of years together)
}.bind(this);
this.clamp = function(value, min, max)
{
console.log(min = 147.3);
console.log(max = 255);
if (value < min)
return min;
else if (value > max)
return max;
else
return value;
}
setTimeout(this.setProportion, 0);
Apologies but I am new to the Adobe Animate tool set and I recognize that I could be missing some key features in how this all operates including frame information. If I'm missing something obvious please point it out and I will wear the dunce cap accordingly. 
Good morning JC,
First of all I wanted to thank you for getting back to us so quickly. Sadly the fix doesn't seem to have helped. I'm including screen shots to show you the issue and hopefully offer clarity.
As a recap we need to move a button across a horizontal bar. As the button is moved there is a contrasting color added to the left side of the button to help visually show the location of the button and its position away from its starting point. We would expect the button's starting point to start at the left end of the horizontal bar. For ease of communication lets call that starting point as position 0. As the button slides right we would expect an accumulation, and as the button is slid left we would expect the opposite.
As you can see, on a new page load the button isn't lined up with the left most point of the horizontal bar. The contrasting color is preloaded and extends past the button a hair. When the button is clicked and dragged (mouse button held down) we get an unwanted behavior:
There is no ability to drag the button across the bar and instead the button snaps to center. The code you had previously supplied us with did allow for the button to move both left and right but the yellow fill was always off. Now the button fails to slide at all. Please let me know your thoughts and thank you again!
Hi.
Thanks.
The FLA you sent to me looks like this:
Is it correct?
AdChoices