Adding a slider control to scheduler event template

[Premith Unnikrishnan]

In scheduler control event editor template I'm trying to add a slider control 

Example:

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/editor-template.html

In index.html

added div with id duration

Reason
style="width:100%;height:60px!important;resize:vertical">

in index.js

if(!endElement.classList.contains('e-datetimepicker')){
newej.calendars.DateTimePicker({value:newDate(endElement.value)||newDate()},endElement);
}
varDurElement=args.element.querySelector('#Duration');
if(!DurElement.classList.contains('e-slider-container')){
slider=newej.inputs.Slider({
min:0,
max:120,
step:5,
value:25,
tooltip:{
placement:'Before',isVisible:true,cssClass:'e-tooltip-cutomization'
},
ticks:{placement:'Before',largeStep:10,showSmallTicks:true},
attrs:{name:'Duration'}

},DurElement);
}

The slider is not updating the value to 25. How can I update the slider.

 {
        Id: 1,
        Subject: 'Server Maintenance',
        StartTime: new Date(2018, 1, 11, 10, 0),
        EndTime: new Date(2018, 1, 11, 11, 30),
        EventType: 'maintenance',
        City: 'Seattle',
        CategoryColor: '#1aaa55',                                                                                                                                                                                                                                                                                                                             Duration:50
    },

I want to bind a data property called duration to the slider.

[Vinitha Devi Murugan]

Hi Premith, 

Syncfusion greetings. 

We have prepared the sample based on the requirement which is available in below link. 

Sample: https://stackblitz.com/edit/mldxe9?file=index.js 

In the above sample, you can render the Slider components in popupOpen event. Once open the dialog we need to refresh the position of Slider component by reposition method in the Dialog’s open event like below, and also set the zIndex  to show the tooltip. 

var DurElement = args.element.querySelector("#Slider"); 

var dialog = args.element.ej2_instances[0]; 

dialog.open = function() { 

  DurElement.ej2_instances[0].reposition(); 

  DurElement.ej2_instances[0].zIndex = 2000; 

}; 

When we add new event with duration, we need to update the event object in popupClose event like below 

popupClose:function(args){ 

    if(args.type === 'Editor' && args.data) { 

      var DurElement = args.element.querySelector("#Slider"); 

      args.data.Duration = DurElement.ej2_instances[0].value; 

    } 

  } 

Kindly check the above sample and revert us for further assistance. 

Regards, 

M.Vinitha devi 

[Premith Unnikrishnan]

Thank you for the quick response this works perfectly awesome job.

[Vinitha Devi Murugan]

Hi Premith, 

 

We are happy to hear that our solution has fulfilled your requirement.  

 

Regards, 

M.Vinitha devi.