DevExtreme jQuery - Customize Widget 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 option.
JavaScript
$(function(){
$("#rangeSliderContainer").dxRangeSlider({
// . . .
showRange: false
});
});See Also
Feedback