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