meowshapes

Slider

Use the slider() function to add a slider control to your scene.

const sliderElement = slider("Amplitude", 0, 5);

update(() => {
    const value = sliderElement.value();
    graph((x) => Math.sin(x) * value);
});

zoom(50);

Initial value

Set the optional initial value. By default, the initial value is in the middle of the given range.

// Sets initial value to 1
slider("Amplitude", 0, 5, 1);

Config

Provide additional configuration options:

slider("Amplitude", 0, 5, null, {
    // Sets step increments
    step: 0.1,
    // Whether or not to show the numeric value 
    // next to the slider
    showValue: false,
});

Returns the Slider object:


Slider

Example usage:
sliderObject.setValue(30);
const current = sliderObject.value();
field 
container: HTMLDivElement
The container that contains the label and the input slider
Example
sliderObject.container.style.borderColor = "blue";
field 
slider: HTMLInputElement
The input slider element
Example
sliderObject.slider.style.padding = "10px";
field 
labelContainer: HTMLDivElement
The div that contains the label and value label
Example
sliderObject.labelContainer.style.backgroundColor = "linen";
field 
label: HTMLLabelElement | null
The label element for the slider
Example
if (sliderObject.label) {
    sliderObject.label.textContent = "Speed";
}
field 
valueLabel: HTMLSpanElement | null
The span element that displays the current value of the slider
Example
if (sliderObject.valueLabel) {
    sliderObject.valueLabel.style.color = "green";
}
method 
value(): number
Returns the current value of the slider as a number
Example
const current = sliderObject.value();
method 
setValue(value: number): void
Sets the value of the slider
param value
The value to set.
Example
sliderObject.setValue(42);
meowshapes