api_slider_properties.md

sidebar_label	Form Slider properties
title	JavaScript Form - Slider Properties
description	You can explore the Properties of the Slider control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.

Slider properties

Usage

{
    type: "slider",
    name?: string,
    id?: string, // must be unique if set, auto-generated if not set
    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, 
    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, must be unique if set, 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
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

<iframe src="https://snippet.dhtmlx.com/ikyyekxq?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>

Related article: Slider