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:  All dhxForm inputs - DHTMLX Form

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"
  • id - (string) the id of a control, auto-generated if not set

  • parent - (string) the id of the parent control
  • 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)
  • label - (string) specifies a label for a control
  • labelWidth - (string) 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
  • labelInline - (boolean) defines whether the label of a slider is rendered on the same level with the trackbar or above it
  • name - (string) the name of a control
  • 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
  • thumbLabel - (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
  • value - (number) the value the thumb will be set at on initialization of 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
  • 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
  • setValue(value: string|number|number[]) - sets the value as a string, a number or an array of number values for a Slider control
  • setConfig(config: object) - sets a new configuration for a Slider control

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:  Get widget of control - DHTMLX Form

Setting configuration of Slider control

It is possible to update the configuration of a Slider control on the fly with the help of the setConfig() method of the object returned by the getItem() method.

To do this, you need to get access to the object of the control by using the getItem() method of Form and pass a new configuration object as a parameter of the setConfig() method:

    label: "slider",
    css: "slider",
    labelInline: true,
    help: " Help information",
    labelWidth: "120px",
    min: 0,
    max: 100,

The setConfig() method of a control doesn't allow updating its id, type and name properties.

Back to top