Skip to main content

Slider properties

Usage​

{
    type: "slider",
    name?: string,
    id?: string,
    value?: number | number[],
    
    css?: string,
    disabled?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean, // false by default
    padding?: string | number, // "8px" by default
    width?: string | number | "content", // "content" by default

    inverse?: boolean, // false by default
    majorTick?: number,
    max?: number, // 100 by default
    min?: number, // 0 by default
    mode?: "vertical" | "horizontal", // "horizontal" by default
    range?: boolean, // false by default
    step?: number, // 1 by default
    tick?: number,
    tickTemplate?: (position: number) => string,
    tooltip?: boolean, // true by default
    
    hiddenLabel?: boolean, // false by default
    label?: string,
    labelPosition?: "vertical" | "horizontal", // "top" by default
    labelWidth?: string | number,

    helpMessage?: string,
}

Description​

type(required) the type of a control, set it to "slider"
name(optional) the name of a control
id(optional) the id of a control, auto-generated if not set
value(optional) the value (or values, if the range option is set to true) the thumb will be set at on initialization of the slider
css(optional) adds style classes to a control
disabled(optional) defines whether a control is enabled (false) or disabled (true), false by default
height(optional) the height of a control, "content" by default
hidden(optional) defines whether a control is hidden, false by default
padding(optional) sets padding between a cell and a border of the Slider control, "8px" by default
width(optional) the width of a control, "content" by default
inverse(optional) enables/disables the inverse slider mode, false by default
majorTick(optional) sets interval of rendering numeric values on the slider scale
max(optional) the maximal value of slider, 100 by default
min(optional) the minimal value of slider, 0 by default
mode(optional) the direction of the Slider scale, "horizontal" by default
range(optional) enables/disables the possibility to select a range of values on the slider, false by default
step(optional) the step the slider thumb will be moved with, 1 by default
tick(optional) sets the interval of steps for rendering the slider scale
tickTemplate(optional) sets a template for rendering values on the scale
tooltip(optional) enables prompt messages with ticks values on hovering over the slider thumb, true by default
hiddenLabel(optional) makes the label invisible, false by default
label(optional) specifies a label for a control
labelPosition(optional) defines the position of a label: "left" | "top", "top" by default
labelWidth(optional) sets the width of the label of a control
helpMessage(optional) adds a help message to a control

Example​

Related article: Slider