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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.