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

JavaScript Slider Control

JS slider control is a draggable slider bar for creating vertical and horizontal range sliders on a page.

Product Features

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

Quick Initialization

5 Simple Steps for Initializing Your JavaScript Slider:
1
Create an HTML file
2
Link it to the source files: slider.js and slider.css, in the header
3
Add a container with a slider id
4
Initialize Slider with the dhx.Slider object constructor.
5
Set the list of basic configuration properties

Live Demo

Why Choose dhtmlxSlider?

Customizable vertical and horizontal JavaScript slider bar
JavaScript Slider control allows easy implementation of vertical and horizontal sliders on a web page. A rich JavaScript API enables you to configure the control entirely to your needs. You can also customize its appearance to match your web app via CSS. Simple but effective, this JavaScript slider is a neat way of creating nice-looking, cross-browser slider bars.
picture for features
All necessary features for interactive web apps
dhtmlxSlider provides options to set minimal and maximal values, step and initial values. You can also add a tooltip that will reflect changes in values on the slider bar. Besides, you can equip slider with a label and specify its position. In addition to setting value by clicking on the slider or dragging the slider's handle, the value can also be set by entering it into the input field.
picture for features
Highly configurable JavaScript slider bar
Depending on your needs, you can build a slider control in several modes: vertical mode, inverse mode with a reverse order of the scale, and range mode with two thumbs. The scale settings are also very adjustable. You can set the necessary intervals between values and even apply a custom template for displaying slider values.
picture for features
Support for Angular, React, Vue.js
Being part of the dhtmlxSuite library, JavaScript slider can be easily initialized using one of the three popular frameworks: Angular, React, and Vue.js. Thus, you can smoothly integrate dhtmlxSlider into your projects. We offer a 30-day evaluation period for testing all our components with the assistance of our technical support team.

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

demo-screenshot

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

Try All UI Widgets for Free

All JavaScript UI widgets are part of the DHTMLX Suite library. You can download a free trial version and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 23 components

PRO features

Need help with dhtmlxSlider integration into your app? Contact us