Your search did not match any results.
Range Selector

Custom Formatting

API Reference
This demo demonstrates the RangeSelector's capability to set a custom format. The slider marker format is customized via the "customizeText" callback. The scale data is also formatted since the initial precision that is set in the coming datasource is not suitable to properly display the data. So, a more appropriate precision is set for scale labels.
Copy to Codepen
Apply
Reset
$(function(){ $("#range-selector").dxRangeSelector({ margin: { top: 50 }, size: { height: 210 }, scale: { minorTickInterval: 0.001, tickInterval: 0.005, startValue: 0.004563, endValue: 0.04976, label: { format: { type: "fixedPoint", precision: 3 } } }, sliderMarker: { format: { type: "fixedPoint", precision: 4 }, customizeText: function () { return this.valueText + " mg/L"; } }, behavior: { snapToTicks: false }, title: "Select a Lead Concentration in Water" }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="range-selector"></div> </div> </body> </html>
#range-selector { height: 440px; width: 100%; }