Adding a slider control to scheduler event template

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.