React Slider - Customize Component Appearance
The Slider can display labels for the min and max values. To configure the labels, use the label object.
jQuery
JavaScript
$(function(){ $("#sliderContainer").dxSlider({ // . . . label: { visible: true, format: function(value) { return value + " units"; }, position: "bottom" // or "top" } }); });
Angular
HTML
TypeScript
<dx-slider <dxo-label [visible]="true" [format]="format" position="bottom"> <!-- or "top" --> </dxo-label> </dx-slider>
import { DxSliderModule } from "devextreme-angular"; // ... export class AppComponent { format = function(value) { return value + " units"; }; } @NgModule({ imports: [ // ... DxSliderModule ], // ... })
Vue
<template> <DxSlider> <DxLabel :visible="true" :format="format" position="bottom" /> <!-- or "top" --> </DxSlider> </template> <script> 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>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Slider, Label } from 'devextreme-react/slider'; const format = function(value) { return value + " units"; } class App extends React.Component { render() { return ( <Slider> <Label visible={true} format={format} position="bottom" /> {/* or "top" */} </Slider> ); } } export default App;
The Slider can also display a tooltip for the slider handle. To configure it, use the tooltip object.
jQuery
JavaScript
$(function(){ $("#sliderContainer").dxSlider({ // . . . tooltip: { enabled: true, position: "bottom", format: function(value) { return value + " units"; }, showMode: "always" // or "onHover" } }); });
Angular
HTML
TypeScript
<dx-slider <dxo-tooltip [enabled]="true" [format]="format" position="bottom" showMode="always"> <!-- or "onHover" --> </dxo-tooltip> </dx-slider>
import { DxSliderModule } from "devextreme-angular"; // ... export class AppComponent { format = function(value) { return value + " units"; }; } @NgModule({ imports: [ // ... DxSliderModule ], // ... })
Vue
<template> <DxSlider> <DxTooltip :enabled="true" position="bottom" :format="format" show-mode="always" /> <!-- or "onHover" --> </DxSlider> </template> <script> 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>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Slider, Tooltip } from 'devextreme-react/slider'; const format = function(value) { return value + " units"; } class App extends React.Component { render() { return ( <Slider> <Tooltip enabled={true} position="bottom" format={format} showMode="always" /> {/* or "onHover" */} </Slider> ); } } export default App;
To specify whether or not the part of the scale from the beginning to the slider handle should be highlighted, use the showRange property.
jQuery
JavaScript
$(function(){ $("#sliderContainer").dxSlider({ // . . . showRange: false }); });
Angular
HTML
TypeScript
<dx-slider [showRange]="false" </dx-slider>
import { DxSliderModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxSliderModule ], // ... })
Vue
<template> <DxSlider :show-range="false" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxSlider } from 'devextreme-vue/slider'; export default { components: { DxSlider } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Slider } from 'devextreme-react/slider'; class App extends React.Component { render() { return ( <Slider showRange={false} /> ); } } export default App;
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.