Format in EJ2 TypeScript Range Slider control

3 Mar 202513 minutes to read

The format feature is used to customize the units of Range Slider values to the desired format. The formatted values will also be applied to the ARIA attributes of the slider. There are two ways to achieve formatting in the slider:

Use the format API of slider which utilizes our Internationalization to format values.
Customize using the events namely renderingTicks and tooltipChange.

index.ts
index.html
index.css
import { Slider } from '@syncfusion/ej2-inputs';

// Initialize Range Slider Control
let sliderObj: Slider = new Slider({
    min: 0, max: 100, step: 1, value: 30,
    // Applying currency formatting for tooltip with two decimal specifiers
    tooltip: { isVisible: true, format: 'C2' },
    // Applying currency formatting for ticks with two decimal specifiers
    ticks: { placement: 'After', format: 'C2', largeStep: 20, smallStep: 10, showSmallTicks: true }
});
// Render initialized Range Slider Control
sliderObj.appendTo('#slider');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Range Slider</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Range Slider Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <div id="slider">
            </div>
        </div>
    </div>
    <style>
        .wrap {
            box-sizing: border-box;
            height: 260px;
            margin: 0 auto;
            padding: 30px 10px;
            width: 460px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Using the format API

In this method, you can apply different predefined formatting styles such as Numeric (N), Percentage (P), Currency (C), and # specifiers. In the example below, we have formatted the ticks and tooltip values into percentages.

index.ts
index.html
index.css
import { Slider } from '@syncfusion/ej2-inputs';

// Initialize Range Slider Control
let percentObj: Slider = new Slider({
    min: 0, max: 1, value: .3, step: .01,
    // Assigning ticks values to percentage formatting
    ticks: { placement: 'After', largeStep: .2, smallStep: .1, showSmallTicks: true, format: 'P0' },
    // Assigning tooltip values to percentage formatting
    tooltip: { placement: 'Before', isVisible: true, showOn: 'Always', format: 'P0' },
});
// Render initialized Range Slider Control
percentObj.appendTo('#slider');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Range Slider</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Range Slider Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <div id="slider">
            </div>
        </div>
    </div>
    <style>
        .wrap {
            box-sizing: border-box;
            height: 260px;
            margin: 0 auto;
            padding: 30px 10px;
            width: 460px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Using Events

This method involves retrieving values from slider events and then processing them into the desired format. In this example, we have customized the ticks values to represent weekdays as one format and tooltip values to display the day of the week as another format.

index.ts
index.html
index.css
import { Slider, SliderTickEventArgs, SliderTooltipEventArgs } from '@syncfusion/ej2-inputs';

// Initialize Range Slider Control
let eventObj: Slider = new Slider({
    // Minimum value
    min: 0,
    // Maximum value
    max: 6,
    // Slider current value
    value: 2,
    // Assigning ticks data
    ticks: {
        placement: 'After',
        largeStep: 1
    },
    renderingTicks: function (args: SliderTickEventArgs) {
        // Weekdays Array
        let daysArr: string[] = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        // Customizing each ticks text into weeksdays
        args.text = daysArr[parseFloat(args.value as any)];
    },
    tooltipChange: function (args: SliderTooltipEventArgs) {
        // Customizing tooltip to display the Day (in numeric) of the week
        args.text = 'Day ' + (Number(args.value) + 1).toString();
    },
    // Assigning tooltip data
    tooltip: {
        placement: 'Before',
        isVisible: true
    }
});
// Render initialized Range Slider Control
eventObj.appendTo('#slider');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Range Slider</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Range Slider Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <div id="slider">
            </div>
        </div>
    </div>
    <style>
        .wrap {
            box-sizing: border-box;
            height: 260px;
            margin: 0 auto;
            padding: 30px 10px;
            width: 460px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}