From ed24a31bef812d4ca0af96b7563b2798433bd9c3 Mon Sep 17 00:00:00 2001 From: Timar Date: Fri, 5 Sep 2025 01:03:49 +0200 Subject: [PATCH 1/2] make slider animation looping optional. looping is off by default --- src/html_interactivity.ts | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/html_interactivity.ts b/src/html_interactivity.ts index ba5712b..73b7198 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 = false){ // if the step is -1, then it is automatically calculated if (step == -1){ step = (max - min) / 100; } @@ -456,9 +457,19 @@ export class Interactive { 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 (val >= max && !loop) { + 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; + } + + // Always update the slider and call the callback slider.value = val.toString(); callback(val); }, interval_time); From 512bdcd5e034c35b0b2cab9885b5f01a9c0819bb Mon Sep 17 00:00:00 2001 From: Timar Date: Fri, 5 Sep 2025 01:06:34 +0200 Subject: [PATCH 2/2] make slider animation looping optional. looping is off by default --- src/html_interactivity.ts | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/html_interactivity.ts b/src/html_interactivity.ts index ba5712b..a8ec14f 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; } @@ -456,9 +457,19 @@ export class Interactive { 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 (val >= max && !loop) { + 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; + } + + // Always update the slider and call the callback slider.value = val.toString(); callback(val); }, interval_time);