slider value does not show at correct location below slider, custom text below slider.

[ajit goel]

I had a couple of questions wrt to the slider control. 

a. If you check slider1.jpg, we see that the slider number 20 is between 10 and 20, instead of when 20 is supposed to be. How can I fix this? 

b. I also want to show some custom text below certain slider ranges, please see slider2.jpg. Is there a way I can do this? 

<ejs-slider id="noOfHoursSlider" name="noOfHoursSlider" ref="noOfHoursSlider" value=1 min=0 max=100 :ticks='ticks' v-model="noOfHours"/>

<script>

import '@syncfusion/ej2-base/styles/material.css';

import '@syncfusion/ej2-vue-buttons/styles/material.css';

import '@syncfusion/ej2-vue-popups/styles/material.css';

import '@syncfusion/ej2-vue-inputs/styles/material.css';

export default {

  data() {

    return {

        ticks: { placement: 'After',smallStep: 10, largeStep: 20, showSmallTicks: true },

        noOfHours:1,

    }

  },

}

<style>

#noOfHoursSlider .e-handle 

{

  height: 25px;

  width: 24px;

  background-size: 24px;

}

#noOfHoursSlider .e-handle 

{

  background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');

  background-repeat: no-repeat;

  background-color: transparent;

  border: 0;

}

#noOfHoursSlider .e-tab-handle::after 

{

  background-color: transparent;

}

</style>

Attachment: Slider_d6deac3a.zip

[ajit goel]

any further update on my issue?

[Sowmiya Padmanaban]

Hi Ajit,  

 

Greetings from Syncfusion support. 

 

Query 1- Slider misalignment. 

 

We have checked your problem with Slider component in our latest package (v18.1.52). We are unable to reproduce the problem with Slider. We have prepared a sample based on your shared code snippet. However, we suspect that you requirement is to position the handle exact to the tick elements. We have added custom styles to meet your expected requirement. 

 

Refer the sample link: 

 

https://codesandbox.io/s/vue-template-i1fr6 

 

If the issue still persist, can you please share the below details. 

·        Video footage of issue reproducing. 

·        Package version used in your application. 

·        Are you rendering slider component inside of any component? 

 

Query 2-  Custom text below the slider. 

 

If you want to display the custom text below the slider component. You can add it by using renderingTicks method. Refer the below links. 

 

RenderingTicks -Triggers on rendering the ticks element in the Slider, which is used to customize the ticks labels dynamically. 

 

https://ej2.syncfusion.com/vue/documentation/slider/format/#using-events 

 

https://ej2.syncfusion.com/vue/demos/#/material/slider/ticks-customization.html 

 

Refer the below link to know more about the Slider component. 

 

UG Documentation- https://ej2.syncfusion.com/vue/documentation/slider/getting-started/ 

 

Demo link-https://ej2.syncfusion.com/vue/demos/#/material/slider/ticks-customization.html 

 

API reference-https://ej2.syncfusion.com/vue/documentation/api/slider/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya. P