< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

React Slider

Easily modifiable React slider component. Part of the cutting-edge Suite UI library.

How to Start With React Slider Component

5 Quick Steps to Initialize DHTMLX Slider in React:
Create a Slider.js file and import files and styles of Slider
Create Slider class, which extends the Component class
Add an empty container for Slider with the reference to it in the el property using the ref property
When the component is initialized, initialize Slider and attach the instance of Calendar to the container with the reference to it in the el property
Specify a set of configuration properties if needed

Product Features

  • Cross-browser compatibility
  • IE11+ support
  • Full control with JavaScript API
  • Horizontal and vertical layout
  • Range mode
  • Accessibility support
  • Inverse mode
  • Scale customization
  • Label customization
  • Thumb labels
  • Support for Angular, React, Vue.js

Live Demo

Why Choose DHTMLX React Slider Control?

Fully-featured React js slider
dhtmlxSlider allows developers to set initial values and assign minimal/maximal numbers, as well as the size of each step between slider values. The results can be set by dragging the slider’s handle or by manually entering numbers into the input field. You are able to add and determine the location of a label, apply a tooltip to monitor the changes in values on your React slider bar.
picture for features
Adjustable vertical and horizontal widget
By default, the React js slider bar is displayed horizontally but can be placed vertically via the mode property; the inverse property allows displaying a scale in reverse order. The DHTMLX component is entirely configured via its comprehensive API. Thus, for example, library users can create a control with two thumbs, which is known as a React range slider.
picture for features
React Slider with wide customization options
You can modify the look and feel of the Slider, set the necessary intervals between values or mark with a tick only the lowest and highest numbers. The component’s appearance is fully customized via CSS in order to meet your web app requirements. Having chosen dhtmlxSlider, you will easily create modern cross-browser slider bars.
picture for features
Angular and Vue.js frameworks support
Apart from smoothly integrating our slider component into React-based web apps, you can also use Angular and Vue.js wrappers. We invite you to download a 30-days free trial to become a happy user of the advanced Suite UI library. Our official support team will assist you during the whole estimation period

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components


File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Need help with dhtmlxSlider integration into your app? Contact us