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
Back to top