Make slider animation looping optional

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);