Format in Vue Range slider component
11 Jun 202412 minutes to read
The format
feature 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
andtooltipChange
.
<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
In this method, we have different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and #
specifiers. In this below example, we have formatted the ticks
and tooltip
values into percentage.
<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 will be retrieving the values from the slider events then process them to desired formatted the 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.
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>