A control that allows selecting a numeric value by moving a thumb along a line with a fixed set of options.

Slider control

Related sample:  Form. All DhxForm Inputs

Adding Slider

You can easily add a Slider control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
            type: "slider",
            label: "slider",
            labelInline: true,
            labelWidth: "50px",
            min: 0,
            max: 100


You can provide the following attributes in the configuration object of a Slider:

  • type - (string) the type of a control, set it to "slider"
  • name - (string) the name of a control
  • id - (string) the id of a control, auto-generated if not set
  • value - (number) the value the thumb will be set at on initialization of the slider
  • width - (string) the width of a control
  • height - (string) the height of a control
  • css - (string) adds style classes to a control
  • disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
  • hidden - (boolean) defines whether a control is hidden
  • label - (string) specifies a label for a control
  • labelWidth - (string|number) sets the width of the label of a control
  • hiddenLabel - (boolean) invisible label that will be used to identify the input on the server side
  • labelPosition - (string) defines the position of a label: "left"|"top"
  • help - (string) adds a help message to a control
  • gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default
  • min - (number) the minimal value of slider, 0 by default
  • max - (number) the maximal value of slider, 100 by default
  • step - (number) the step the slider thumb will be moved with, 1 by default
  • mode - (string) the direction of the Slider scale, "horizontal" by default
  • tooltip - (boolean) enables prompt messages with ticks values on hovering over the slider thumb, true by default
  • range - (boolean) enables/disables the possibility to select a range of values on the slider
  • inverse - (boolean) enables/disables the inverse slider mode
  • tick - (number) sets the interval of steps for rendering the slider scale
  • majorTick - (number) sets interval of rendering numeric values on the slider scale
  • tickTemplate - (function) sets a template for rendering values on the scale

Working with Slider

You can manipulate a Slider control by using methods of the object returned by the getItem() method.

For example, you can get the value of the control:

var value = form.getItem("slider_id").getValue();

List of the control methods:

  • clear() - clears a value of a Slider control
  • disable() - disables a Slider control on a page
  • enable() - enables a disabled Slider control
  • getValue(): number[] - returns the current value as an array of number values of a Slider control
  • getWidget(): object - returns the dhtmlxSlider widget attached to a Slider control
  • hide() - hides a Slider control
  • isDisabled(): boolean - checks whether a Slider control is disabled
  • setValue(value: string|number|number[]) - sets the value as a string, a number or an array of number values for a Slider control
  • show() - shows a Slider control on the page

Working with the widget of Slider control

There is a possibility to use methods of dhtmlxSlider via the getWidget() method of a Slider control.

For example, you can disable a Slider control. To do this, you need to get the widget attached to the Slider control and then use the disable() method of this widget.

var slider = form.getItem("slider_id").getWidget();  // -> dhtmlxSlider
slider.disable(); // disables slider

Related sample:  Form. Get Widget Of Control

Back to top