Kendo UI Slider

jQuery + Kendo UI + MockJax

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="container">
    I would like to see the value, plus at least the min and max tick marks.<br/>
    <div id="slider1" data-role="slider" data-show-buttons="false" data-max="8096" data-min="1024" data-large-step="1024" data-value="2048"></div>
    
     <div id="slider2" data-role="slider" data-max="8096" data-min="1024" data-small-step="1024" data-large-step="2048" data-value="2048"></div>
</div>

CSS

#container {
    width: 100%;
    margin: 20px 0px 0px 20px;
}

#container > div {
    margin: 10px;
}

JavaScript

(function() {
    
    kendo.bind($("#container"));
    
    fixSliderMinMax("slider1");
    fixSliderMinMax("slider2");
})()
    
function fixSliderMinMax(sliderId) {
    var slider = $("#" + sliderId).data("kendoSlider");

    slider.bind("change", sliderOnChange);
 
    if (slider.wrapper) {
        if(slider.wrapper.find(".k-first").length > 0) {
            slider.wrapper.find(".k-first").addClass("k-tick-small").html("<span class='k-label'>" + slider.options.min + "</span>");
            slider.wrapper.find(".k-last").addClass("k-tick-large").html("<span class='k-label'>" + slider.options.max + "</span>");
            slider.wrapper.find(".k-draghandle").attr("title", slider.value());
        }
        else {
            var w = slider.wrapper.width() - 10; 
            var m = slider.options.min             
            slider.wrapper.prepend('<ul class="k-reset k-slider-items"><li class="k-tick k-first k-tick-large k-tick-small" style="width: ' + w + 'px; " title="1024"><span class="k-label">1024</span></li><li class="k-tick k-last k-tick-large" style="width: 10px; " title="7168"><span class="k-label">8096</span></li></ul>');
        }
        
    } else { alert('no wrap');}

}
 
function sliderOnChange(e) {
    if (e.sender.wrapper) {
        e.sender.wrapper.find(".k-draghandle").attr("title", e.value);
    }
}