title: How to make videojs marker slidable or movable
body: <p>I want to move my <code>markers</code> whenever it is slided along with the seek. I expect my markers to be exactly <code>slidable</code>  as <strong>jqueryui-slider</strong></p>
  
  <p><strong>Question:</strong> I want my <code>markers</code>(both) to be as slidable as <code>jqueryui-range</code> slider as shown below the video in the following example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var player = videojs('example_video_1');
  
  function markplayer(){
  var inTimeOutTimeList = [6.333,27.667];
          for(var i = 0; i &lt; 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 ] );
        }
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://vjs.zencdn.net/4.2/video.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/&gt;
  
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/&gt;
  
  
  
  &lt;video id="example_video_1" width="400" height="210" controls class="video-js vjs-default-skin" data-setup='{ "inactivityTimeout": 0 }'&gt;
     &lt;source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"&gt;
     &lt;source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"&gt;
  &lt;/video&gt;
  
  
  &lt;p&gt;&lt;b&gt;I want both of my red markers to be movable/slidable like below slider&lt;/b&gt;&lt;/p&gt;
  
  
  &lt;div id="slider-range"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me thanks in advance!!!</p>