Configuration

Initial value

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

const 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:

const 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.

const 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:

const slider = new dhx.Slider("slider_container", {
    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

const 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

const slider = new dhx.Slider("slider_container", { 
    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"

const slider = new dhx.Slider("slider_container", { 
   label:"Volume",
   // label is rendered on the same level with the trackbar
   labelPosition:"left"
});

Related sample: Slider. Label

Step

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:

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

Tooltip

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:

const 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:

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

Related sample: Slider. Vertical mode