Sliders

Sliders

Sliders allow users to dynamically adjust parameters. Each slider is bound to a reactive variable in $state, accessible in Plot.js functions as $state.{key}.

Here's an example of a sine wave with an adjustable frequency:

line | slider

Animated Sliders

Sliders can also be used to create animations. When a slider is given an fps (frames per second) parameter, it automatically animates by updating its value over time. This approach is useful when all frame differences can be expressed using JavaScript functions that read from $state variables.

(
    Plot.line(
        {"x": range(100)},
        {
            "y": Plot.js(
                """(d, i) => Math.sin(
                        i * 2 * Math.PI / 100 + 2 * Math.PI * $state.frame / 60
                    )"""
            )
        },
    )
    + Plot.domain([0, 99], [-1, 1])
) | Plot.Slider(
    key="frame", label="frame:", showValue=True, fps=30, showFps=True, range=[0, 59]
)