Slider and RangeSlider UI controls

Slider and Range Slider are JavaScript controls intended for setting a numeric value from a predefined range of values.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

The main difference between these two controls is that Slider allows setting a single value and Range Slider can be used for setting a range of values. A user can set the required values by dragging a marker to the left or the right sides of the value line. Labels and titles can help users understand the purpose of a slider and define the currently selected value.

Slider

The Slider control allows setting a numeric value from a preset range of values. A user can set a proper value by dragging a marker. To help users understand the purpose of the available values, you can add a text label.

Min and Max Values

You can define the minimal and maximal values of Slider.

Moving Titles

The Slider title displays the currently selected value. Using event handling, you can define custom functions that are called after value changes or after a user drags a marker. Titles are moving with the marker by default, but you can make them fixed.

Try moving the slider markers

Vertical Slider

The Slider control can be easily made vertical with the help of the related setting.

RangeSlider

Range Slider is an advanced version of the Slider control. Users can operate two markers for setting a particular range of values. RangeSlider also supports the vertical mode and moving titles.