(function($) { $.widget("ui.tagbar", { options: { max: 400, label: "", start: 0, end: 0 }, _create: function() { var o = this.options; this.element .addClass("ui-tagbar ui-widget"); var inputHTML = '<input class="ui-corner-all" type="text" id="start" size="3">'; var startNode = $(inputHTML).attr('value', o.start); var endNode = $(inputHTML).attr('value', o.end); var sliderNode = $('<div style="width:450px; float:left" class="tag-slider"></div>') .slider({ range: true, min: 0, max: o.max, values: [o.start, o.end], slide: function(event, ui) { //$('#video').videoplayer('setTime', ui.value); startNode.val(ui.values[0]); endNode.val(ui.values[1]); } }); this.element .append('<div class="tag-label">'+o.label+'</div>') .append($('<div class="tag-play"></div>') .click(function() {})) .append(sliderNode) .append($('<div class="tag-times"></div>') .append(startNode) .append(endNode)) }, destroy : function() { } }); $.extend($.ui.tagbar, {}); })(jQuery);