How to control slider ticks?

[Gleb]

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>

[Iliana Dyankova]

Hello Gleb,

You could disable ticks of the slider by setting the tickPlacement option to "none".
For example:

$(document).ready(function() {
  var slider = $("#slider").kendoSlider({
  tickPlacement: "none",
  });
});

I am afraid this option is currently not presented in our online documentation, but we will update it in a short period of time.


All the best,
Iliana Nikolova
the Telerik team