What causes ticks to be shown or hidden?
When I use the following example code I have no ticks in generated code. But if I change .humidity width to 300px, ticks are back. Then if I add two parameters smallStep:100 and largeStep:1000 tick are not generated once again.
I understand that I can hide or show them using CSS, but I'm interested in having DOM as small as possible, without hundreds of hidden but unnecessary elements. Can ticks be disabled using some parameter?
Thank you so much for your time.
Example code:
<style>
.humidity {position:relative;width:100px;}
.humidity .k-slider-track {background:url('bg-slider-track.png') left center repeat-x;}
.humidity .k-slider-selection {position:relative;height:14px;background:#006fa7;opacity:0.2;}
.humidity .k-draghandle {position:absolute;top:-2px;width:9px;height:18px;background:url('/i/design/icon-slider-handle.png') no-repeat;}
</style>
<div id="rangeslider" class="humidity">
<input />
<input />
</div>
<script src="js/kendo.core.min.js"></script>
<script src="js/kendo.draganddrop.min.js"></script>
<script src="js/kendo.slider.min.js"></script>
<script>
$(document).ready(function() {
$("#rangeslider").kendoRangeSlider({
min: 0,
max: 10000,
selectionStart: 0,
selectionEnd: 5000,
showButtons:false,
tooltip:{
enabled:false
}
});
});
</script>