Search results

Globalization in JavaScript (ES5) 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
    'de-DE': {
        'slider': {
            incrementTitle: 'Erhöhen, ansteigen', decrementTitle: 'verringern'
// Initialize range Slider component
var rangeObj = new ej.inputs.Slider({
    value: [30, 70],
    type: 'Range',
    locale: 'de-DE',
    showButtons: true
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <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="" type="text/javascript"></script>
    <div id="container">
        <div class="wrap">
          <div id="slider">

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>
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