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
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize Slider (Example) |
| Initialization in the range mode | Learn how to initialize a Slider in the range mode (Example) |
| Initialization in the inverse mode | Learn how to initialize a Slider in the inverse mode (Example) |
| Initialization in the vertical mode | Learn how to initialize a Slider in the vertical mode (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Slider with React (Demo) |
| Angular integration | Learn how to use DHTMLX Slider with Angular (Demo) |
| Vue integration | Learn 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.
| Topic | Description |
|---|---|
| Setting initial value | Learn how to specify the initial value of a Slider |
| Specifying the min/max values | Learn how to define the start and end points of a Slider |
| Configuring Slider step | Learn how to configure the step the slider thumb will be moved with |
| Configuring Slider scale | Learn how to configure the scale of a Slider (Example) |
| Configuring Slider label | Learn how to configure the label of a Slider (Example) |
| Making a label hidden | Learn how to initialize a Slider with hidden label |
| Configuring a tooltip | Learn how to configure the tooltip for a Slider (Example) |
How to customize Slider
In this section you can learn how to customize a Slider.
| Topic | Description |
|---|---|
| Custom scale | The example shows how to customize the Slider scale |
| Styling Slider | Learn how to change the look and feel of Slider (Example) |
| List of CSS classes | A 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.
| Topic | Description |
|---|---|
| Setting the value of Slider | Learn how to set the value for Slider dynamically (Example) |
| Getting the value of Slider | Learn how to get the current value of Slider (Example) |
| Disabling / enabling Slider | Learn how to disable and enable a Slider on the page (Example) |
| Is disabled | Learn how to check whether a Slider is disabled (Example) |
| Setting focus on a Slider thumb | Learn how to set focus on a Slider thumb |
| Removing focus | Learn how remove focus from a Slider thumb |
How to work with Slider events
This section explains how to work with Slider events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Slider events (Example) |
API reference
In this section you can find out corresponding references of Slider API.
| Topic | Description |
|---|---|
| Slider methods | Check the list of Slider methods |
| Slider events | Check the list of Slider events |
| Slider properties | Check 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.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| AwaitRedraw | Learn how to perform the code after the component's rendering |
Any questions left?
Do you need more functionality? Feel free to share your suggestions in the comments below!