Search results

Globalization in JavaScript Range Slider control

08 May 2023 / 1 minute to read


The Localization library allows you to localize default text content of the Slider. The slider control has static text on some features (like increase and decrease button) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object.

The following list of properties and its values are used in the slider.

Locale keywords Text
Increase Increase
Decrease Decrease

Loading translations

To load translation object in an application, use load function of the L10n class.

The following example demonstrates the Slider in Deutsch culture.

Copied to clipboard
import { Slider } from '@syncfusion/ej2-inputs';
import { L10n } from '@syncfusion/ej2-base';

    'de-DE': {
        'slider': {
            incrementTitle: 'Erhöhen, ansteigen', decrementTitle: 'verringern'
    // Initialize range Slider control
    let rangeObj: Slider = new Slider({
        value: [30, 70],
        type: 'Range',
        locale: 'de-DE',
        showButtons: true
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <title>Essential JS 2 Slider</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Slider Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
          <div id="slider">
Copied to clipboard
#container {
  visibility: hidden;

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

.wrap {
  box-sizing: border-box;
  height: 260px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 260px;

See Also