JavaScript/jQuery Slider - Customize Component Appearance

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

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

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

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

To specify whether or not the part of the scale from the beginning to the slider handle should be highlighted, use the showRange property.

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