Slider

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
        }
    ]
});

Attributes

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

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();

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
getProperties returns an object with the available configuration attributes of the control
getValue returns the current value of a Slider control
getWidget returns the dhtmlxSlider widget attached to a Slider control
hide hides a Slider control
isDisabled checks whether a Slider control is disabled
isVisible checks whether a Slider control is visible on the page
setProperties allows changing available configuration attributes of the control dynamically
setValue sets the value for a Slider control
show shows a Slider control on the page

List of the control events:

afterChangeProperties fires after configuration attributes of the control have been changed dynamically
afterHide fires after a control is hidden
afterShow fires after a control is shown
beforeChangeProperties fires before configuration attributes of the control are changed dynamically
beforeHide fires before a control is hidden
beforeShow fires before a control is shown
change fires on changing the value of a 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();  // -> dhtmlxSlider
slider.disable(); // disables slider
Back to top