How to make videojs marker slidable or movable

var player = videojs('example_video_1');

function markplayer(){
var inTimeOutTimeList = [6.333,27.667];
        for(var i = 0; i < inTimeOutTimeList.length; i++){
            player.markers.add([{
            time: inTimeOutTimeList[i],
            text: inTimeOutTimeList[i]
        }]);

        var icon = (i == 0) ? '[' : ']';
        $(".vjs-marker[data-marker-time='"+inTimeOutTimeList[i]+"']").html(icon);
    }
};

player.markers({
   breakOverlay:{
      display: true,
      displayTime: 120,
      style:{
         'width':'100%','height': '30%','background-color': 'rgba(10,10,10,0.6)','color': 'white','font-size': '16px'
      }
   },
   markers: [
      {time:10, startTime:10, endTime:60, text: "this", overlayText: "1", class: "special-blue"},
   ]
});

setTimeout(function(){
 markplayer();    
},2000);

 $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });

.vjs-fluid {
            overflow: hidden;
         }
         #example_video_1 .vjs-control-bar {
            display: block;
         }
         #example_video_1 .vjs-progress-control {
               bottom: 28px;
               left: 0;
               height: 10px;
               width: 100%;
         }
    .vjs-default-skin.vjs-has-started .vjs-control-bar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
         }

.vjs-marker {
            background-color: transparent !important;
            height: 20px !important;
            font-size: 20px !important;
            color: red !important;
            font-weight: bold;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="http://vjs.zencdn.net/4.2/video.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/><video id="example_video_1" width="400" height="210" controls class="video-js vjs-default-skin" data-setup='{ "inactivityTimeout": 0 }'><source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"><source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></video><p>I want both of my red markers to be movable/slidable like below slider</p><div id="slider-range"></div>

 $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="http://vjs.zencdn.net/4.2/video.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/><p>I want both of my red markers to be movable/slidable like below slider</p><div id="slider-range"></div>