JavaScript/jQuery RangeSlider - Customize Component Appearance

The RangeSlider can display labels for the min and max values. To configure the labels, use the label object.

JavaScript
  • $(function(){
  • $("#rangeSliderContainer").dxRangeSlider({
  • // . . .
  • label: {
  • visible: true,
  • position: "bottom", // or "top"
  • format: function(value) {
  • return value + " units";
  • }
  • }
  • });
  • });

The RangeSlider can also display a tooltip for the slider handles. To configure it, use the tooltip object.

JavaScript
  • $(function(){
  • $("#rangeSliderContainer").dxRangeSlider({
  • // . . .
  • tooltip: {
  • enabled: true,
  • position: "bottom", // or "top"
  • showMode: "always", // or "onHover"
  • format: function(value) {
  • return value + " units";
  • }
  • }
  • });
  • });

To specify whether or not the selected range should be highlighted, use the showRange property.

JavaScript
  • $(function(){
  • $("#rangeSliderContainer").dxRangeSlider({
  • // . . .
  • showRange: false
  • });
  • });
See Also