Skip to main content


Initial value#

It is possible to define the value the thumb of the slider will be set at on the initialization of the component:

var slider = new dhx.Slider("slider_container", {     value:20});

Inverse mode#

You can adjust the configuration of Slider so that its scale would render values in the reverse order, i.e. from the maximal value to the minimal one.

To launch this mode, make use of the inverse property set to true:

var slider = new dhx.Slider("slider_container", {    inverse:true,   min: 100,   max: 0,   step:1});

Related sample: Slider. Inverse Mode Of The Slider

Minimal and maximal values#

The minimal and maximal values define the start and end points of the slider. You can specify them via the corresponding configuration properties - min and max. The default values are 0 and 100, correspondingly.

var slider = new dhx.Slider("slider_container", {     min:1,    max:150});

Range mode#

Besides the standard slider with one thumb, you can create a slider with two thumbs, that is a range slider. For this, you need to use the range:true option in the slider configuration object and define an array with the min and max values for the range:

var slider = new dhx.Slider("slider", {    min: 0,    max: 100,    value: 0,    step: 1,    range: true,     /*!*/    value: [25, 75]  /*!*/});

Related sample: Slider. Range Mode Of The Slider

There are more details given in the Range Mode article.

Scale settings#

You can configure the look and feel of the Slider scale via the corresponding properties of the Slider configuration object:

  • 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 slider scale

var slider = new dhx.Slider("slider_container", {    tick: 5,   majorTick:10,   tickTemplate: function(major_tick){        return major_tick + "°";   } });

Related sample: Slider. Custom Scale

Related sample: Slider. Slider With A Scale

Showing only the first and the last ticks#

In case you want to mark just the minimal and maximal values with ticks, you need to:

  • set the value of the tick property equal to the value of the max property
  • set the majorTick property to 1

var slider = new dhx.Slider("slider", {     max:100, min:0, tick:100, majorTick:1});

Slider label#

There is a possibility to show a label next to the slider.

There are two properties that allow manipulating the label of the slider:

  • label - specifies the label of a slider
  • labelPosition - defines the position of a label of a slider: "left"|"top"
var slider = new dhx.Slider("slider_container", {    label:"Volume",   // label is rendered on the same level with the trackbar   labelPosition:"left"});

Related sample: Slider. Slider Label


The step option defines the size of each jump between values of the slider. By default, the value of the step is set to 1. You can change this property via the Slider configuration object:

var slider = new dhx.Slider("slider_container", {     step:2});


You can specify a tooltip that will display changeable values of the slider when the user moves the slider's thumb.

There is the tooltip property that enables rendering the slider value over the thumb:

var slider = new dhx.Slider("slider_container", {     tooltip:true});

Related sample: Slider. Tooltip For The Slider

Vertical mode#

By default, a slider scale is placed horizontally, but you can arrange it vertically via the mode property of the Slider configuration object:

var slider = new dhx.Slider("slider_container", {    mode:"vertical"});

Related sample: Slider. Vertical Mode Of The Slider