Skip to main content

Features

This page contains structured information that will help you to start working with DHTMLX Slider and go into deep dive on its functionality.

How to start with DHTMLX Slider

In this section you can find out how to initialize Slider in different modes and how to integrate Slider into your applications.

Initialization

TopicDescription
Basic initializationLearn how to initialize Slider (Example)
Initialization in the range modeLearn how to initialize a Slider in the range mode (Example)
Initialization in the inverse modeLearn how to initialize a Slider in the inverse mode (Example)
Initialization in the vertical modeLearn how to initialize a Slider in the vertical mode (Example)

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Slider with React (Demo)
Angular integrationLearn how to use DHTMLX Slider with Angular (Demo)
Vue integrationLearn how to use DHTMLX Slider with Vue.js (Demo)

How to configure Slider

In this section you can find out how to set the initial value of Slider, how to specify the minimal and maximal values, how to configure the step, scale, label, and tooltip of Slider.

TopicDescription
Setting initial valueLearn how to specify the initial value of a Slider
Specifying the min/max valuesLearn how to define the start and end points of a Slider
Configuring Slider stepLearn how to configure the step the slider thumb will be moved with
Configuring Slider scaleLearn how to configure the scale of a Slider (Example)
Configuring Slider labelLearn how to configure the label of a Slider (Example)
Making a label hiddenLearn how to initialize a Slider with hidden label
Configuring a tooltipLearn how to configure the tooltip for a Slider (Example)

How to customize Slider

In this section you can learn how to customize a Slider.

TopicDescription
Custom scaleThe example shows how to customize the Slider scale
Styling SliderLearn how to change the look and feel of Slider (Example)
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with Slider

In this section you can learn how to set, get the value of the Slider, how to disable and enable the Slider, and more.

TopicDescription
Setting the value of SliderLearn how to set the value for Slider dynamically (Example)
Getting the value of SliderLearn how to get the current value of Slider (Example)
Disabling / enabling SliderLearn how to disable and enable a Slider on the page (Example)
Is disabledLearn how to check whether a Slider is disabled (Example)
Setting focus on a Slider thumbLearn how to set focus on a Slider thumb
Removing focusLearn how remove focus from a Slider thumb

How to work with Slider events

This section explains how to work with Slider events.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Slider events (Example)

API reference

In this section you can find out corresponding references of Slider API.

TopicDescription
Slider methodsCheck the list of Slider methods
Slider eventsCheck the list of Slider events
Slider propertiesCheck the list of Slider properties

Common functionality

In this section you will learn about common functionality of the library which can be useful while working with Slider.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


info

Do you need more functionality? Feel free to share your suggestions in the comments below!