Numeric range slider in Vue Range slider component

16 Mar 20234 minutes to read

The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent units. The numeric processing is demonstrated as follows.

app.vue

<template>
   <div id='app'>
     <div class='wrap'>
            <div class='label'>Slider formatted with unit representation</div>
            <ejs-slider id="slider"  min=0 max=100 step=1 value=30 :ticks='ticks' :tooltip='tooltip'>
            </ejs-slider>
        </div>

        <div class='wrap'>
            <div class='label'>Slider formatted with three decimal specifiers</div>
            <ejs-slider id="slider1" min=0.1 max=0.2 step=0.01 value=0.13 :tooltip='decimalTooltip' :ticks='decimalTicks'>
            </ejs-slider>
        </div>

        <div class='wrap'>
            <div class='label'>Slider formatted with two leading zeros</div>
            <ejs-slider id="slider2" min=0 max=100 step=1 value=30 :tooltip='formatTooltip' :ticks='formatTicks'>
            </ejs-slider>
        </div>
   </div>
</template>
<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;
        position: absolute;
        width: 98%;
    }
    .wrap {
    box-sizing: border-box;
    height: 100px;
    margin: 0 auto;
    padding: 30px 10px;
    width: 460px;
    }

    .wrap .label {
    text-align: center;
    }
</style>
<script>
import Vue from 'vue';
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);
export default {
  data: function() {
    return {
        tooltip: { isVisible: true, format: '##.## Km' },
        ticks: { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true },
        decimalTooltip:{ isVisible: true, format: '##.#00' },
        decimalTicks:{ placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true },
        formatTooltip:{ isVisible: true, format: '00##' },
        formatTicks:{ placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true }
    };
  }
}
</script>