Skip to main content


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",            name:"slider",            label: "slider",            labelWidth: "50px",            min: 0,            max: 100        }    ]});


View the full list of configuration properties of the Slider control.

Working with Slider#

You can manipulate a Slider control by using methods or events 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();


Check the full list of methods of the Slider control.


Check the full list of events of the Slider control.

Working with the dhtmlxSlider widget#

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();  // -> dhtmlxSliderslider.disable(); // disables slider