Format in Vue Range slider component

23 Dec 202412 minutes to read

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

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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
    <ejs-slider id='format' :value='value' :min="min" :max="max" :step="step"
    :tooltip="tooltip" :ticks="ticks" ></ejs-slider>
  </div>
</template>
<script setup>

import { SliderComponent as EjsSlider } from "@syncfusion/ej2-vue-inputs";

const min = 0, max = 100, step = 1, value = 30;
// Applying currency formatting for tooltip with two decimal specifiers
const tooltip = { isVisible: true, format: 'C2' };
// Applying currency formatting for ticks with two decimal specifiers
const ticks = { placement: 'After', format: 'C2', largeStep: 20, smallStep: 10, showSmallTicks: true };

</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>
<template>
  <div id="app">
    <ejs-slider id='format' :value='value' :min="min" :max="max" :step="step" :tooltip="tooltip"
      :ticks="ticks"></ejs-slider>
  </div>
</template>
<script>
import { SliderComponent } from "@syncfusion/ej2-vue-inputs";

export default {
  name: "App",
  components: {
    "ejs-slider": SliderComponent
  },
  data() {
    return {
      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 }
    };
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#app {
  height: 40px;
  left: 30%;
  position: absolute;
  top: 40%;
  width: 50%;
}
</style>

Using format API

This method offers different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and # specifiers. In the example below, we have formatted the ticks and tooltip values into percentage.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
    <ejs-slider id='api' :value='value' :min="min" :max="max" :step="step"
    :tooltip="tooltip" :ticks="ticks" ></ejs-slider>
  </div>
</template>
<script setup>

import { SliderComponent as EjsSlider} from "@syncfusion/ej2-vue-inputs";

const min = 0, max = 1, value = 0.3, step = 0.01;
// Assigning ticks values to percentage formatting
const ticks = { placement: 'After', largeStep: .2, smallStep: .1, showSmallTicks: true, format: 'P0' };
// Assigning tooltip values to percentage formatting
const tooltip = { placement: 'Before', isVisible: true, showOn: 'Always', format: 'P0' };

</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>
<template>
  <div id="app">
    <ejs-slider id='api' :value='value' :min="min" :max="max" :step="step" :tooltip="tooltip" :ticks="ticks"></ejs-slider>
  </div>
</template>
<script>
import { SliderComponent } from "@syncfusion/ej2-vue-inputs";

export default {
  name: "App",
  components: {
    "ejs-slider": SliderComponent
  },
  data() {
    return {
      min: 0, max: 1, value: 0.3, step: 0.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' }
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#app {
  height: 40px;
  left: 30%;
  position: absolute;
  top: 40%;
  width: 50%;
}
</style>

Using Events

In this method, we retrieve the values from the slider events then process them to achieve the desired formatted values. In this sample, we have customized the ticks values into weekdays as one formatting and tooltip values into day of the week as another formatting.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
b<template>
  <div id="app">
  <ejs-slider id='events' :value='value' :tooltip="tooltip" :ticks="ticks" :min="min" :max="max" :renderingTicks="renderingTicks" :tooltipChange="tooltipChange"></ejs-slider>
</div>
</template>
<script setup>
import { SliderComponent as EjsSlider} from "@syncfusion/ej2-vue-inputs";

const min = 0, max = 6, value = 2;
// Assigning ticks values to percentage formatting
const ticks = { placement: 'After', largeStep: 1 };
// Assigning tooltip values to percentage formatting
const tooltip = { placement: 'Before', isVisible: true };

const renderingTicks= (args) => {
// Weekdays Array
var daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday'];
// Customizing each ticks text into weeksdays
args.text = daysArr[parseFloat(args.value)];
};
const tooltipChange = (args) => {
// Customizing tooltip to display the Day (in numeric) of the week
args.text = 'Day ' + (Number(args.value) + 1).toString();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 #app {
  height: 40px;
  left: 30%;
  position: absolute;
  top: 40%;
  width: 50%;
}
</style>
<template>
  <div id="app">
    <ejs-slider id='events' :value='value' :tooltip="tooltip" :ticks="ticks" :min="min" :max="max"
      :renderingTicks="renderingTicks" :tooltipChange="tooltipChange"></ejs-slider>
  </div>
</template>
<script>
import { SliderComponent } from "@syncfusion/ej2-vue-inputs";

export default {
  name: "App",
  components: {
    "ejs-slider": SliderComponent
  },
  data() {
    return {
      // Minimum value
      min: 0,
      // Maximum value
      max: 6,
      // Slider current value
      value: 2,
      // Assigning ticks data
      ticks: {
        placement: 'After',
        largeStep: 1
      },
      // Assigning tooltip data
      tooltip: {
        placement: 'Before',
        isVisible: true
      }
    };
  },
  methods: {
    renderingTicks: function (args) {
      // Weekdays Array
      var daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday'];
      // Customizing each ticks text into weeksdays
      args.text = daysArr[parseFloat(args.value)];
    },
    tooltipChange: function (args) {
      // Customizing tooltip to display the Day (in numeric) of the week
      args.text = 'Day ' + (Number(args.value) + 1).toString();
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#app {
  height: 40px;
  left: 30%;
  position: absolute;
  top: 40%;
  width: 50%;
}
</style>