diff --git a/src/html_interactivity.ts b/src/html_interactivity.ts
index ba5712b..c7e5009 100644
--- a/src/html_interactivity.ts
+++ b/src/html_interactivity.ts
@@ -408,9 +408,10 @@ export class Interactive {
* @param step step size
* @param time time of the animation in milliseconds
* @param display_format_func function to format the display of the value
+ * @param loop : boolean = false, set to true to loop the slider animation
*/
public slider(variable_name : string, min : number = 0, max : number = 100, value : number = 50, step : number = -1,
- time : number = 1.5, display_format_func : formatFunction = defaultFormat_f){
+ time : number = 1.5, display_format_func : formatFunction = defaultFormat_f, loop: boolean = false){
// if the step is -1, then it is automatically calculated
if (step == -1){ step = (max - min) / 100; }
@@ -453,12 +454,27 @@ export class Interactive {
if (this.intervals[variable_name] == undefined){
// if is not playing
playbutton.classList.add("paused");
+ let is_first_draw_interval = true;
this.intervals[variable_name] = setInterval(() => {
let val = parseFloat(slider.value);
val += step;
- // wrap around
- val = ((val - min) % (max - min)) + min;
-
+
+ // Handle stopping at max if looping is disabled
+ // if slider is at max and we want to replay
+ // we check if its the is_first_draw_interval
+ // so that it succesfully wraps around
+ if (val >= max && !loop && !is_first_draw_interval) {
+ val = max;
+ playbutton.classList.remove("paused");
+ clearInterval(this.intervals[variable_name]);
+ this.intervals[variable_name] = undefined;
+ } else {
+ // Wrap around to min if looping is enabled or not at max
+ val = ((val - min) % (max - min)) + min;
+ }
+ is_first_draw_interval = false;
+
+ // Always update the slider and call the callback
slider.value = val.toString();
callback(val);
}, interval_time);