DevExtreme React - Customize Widget Appearance

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

  • <template>
  • <DxSlider>
  • <DxLabel
  • :visible="true"
  • :format="format"
  • position="bottom" /> <!-- or "top" -->
  • </DxSlider>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxSlider, DxLabel } from 'devextreme-vue/slider';
  •  
  • export default {
  • components: {
  • DxSlider,
  • DxLabel
  • },
  • methods: {
  • format(value) {
  • return value + " units";
  • }
  • }
  • }
  • </script>

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

  • <template>
  • <DxSlider>
  • <DxTooltip
  • :enabled="true"
  • position="bottom"
  • :format="format"
  • show-mode="always" /> <!-- or "onHover" -->
  • </DxSlider>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxSlider, DxTooltip } from 'devextreme-vue/slider';
  •  
  • export default {
  • components: {
  • DxSlider,
  • DxTooltip
  • },
  • methods: {
  • format(value) {
  • return value + " units";
  • }
  • }
  • }
  • </script>

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

  • <template>
  • <DxSlider
  • :show-range="false"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxSlider } from 'devextreme-vue/slider';
  •  
  • export default {
  • components: {
  • DxSlider
  • }
  • }
  • </script>
See Also