How to control slider ticks?

2 posts, 0 answers
  1. Gleb
    Gleb avatar
    1 posts
    Member since:
    Mar 2012

    Posted 13 Mar 2012 Link to this post

    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>
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 16 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top