verticalSlider

A vertical range input.

Basic input

Move the slider between 0 and 100. The value updates while dragging.

lbl is optional: omit it for an input without a visible label. These examples use the default label placement; no lbl_position is required.

Python

Python recipe

from gramlot.page import WebPage


class Page(WebPage):
    """A vertical range input."""

    def main(self, root):
        pane = root.div(datapath="field")
        pane.data(".value", 25)
        pane.verticalSlider(
            value='^.value',
            lbl='verticalSlider',
            minimum=0,
            maximum=100,
            step=1,
            intermediateChanges=True,
            height='130px'
        )
        pane.p("Stored value:")
        pane.pre("^.value")

JavaScript

JavaScript recipe

export function build(root) {
  const pane = root.div({datapath: "field"});
  pane.data(".value", 25);
  pane.verticalSlider({
    value: "^.value",
    lbl: "verticalSlider",
    minimum: 0,
    maximum: 100,
    step: 1,
    intermediateChanges: true,
    height: "130px"
  });
  pane.p("Stored value:");
  pane.pre("^.value");
}

This first example covers basic input and data binding. Additional options and edge cases will be added progressively.

Learn about binding in the tutorial →